Vue向子组件传递month_id仅首次生效，后续点击无更新问题

实现方式是否正确？ #

父组件通过props传递month_id的逻辑是正确的，但子组件的处理存在缺陷——created钩子仅在组件首次创建时执行一次，后续父组件更新month_id时，子组件不会再次触发created，所以你看不到更新后的日志。

解决后续点击不更新的问题 #

方法1：用watch监听month_id的变化 #

在子组件中添加watch选项，专门监听month_id的变更，一旦值发生变化就执行对应的逻辑：

<script>     
export default {         
  props: ['month_id'],         
  created: function () {
    console.log('组件创建时的month_id:', this.month_id);  
  },
  watch: {
    month_id(newVal, oldVal) {
      console.log('month_id更新了:', newVal);
      // 这里可以添加需要的更新逻辑，比如重新请求对应月份的数据
    }
  }    
}
</script>

方法2：将逻辑迁移到computed（适用于基于month_id计算数据的场景） #

如果子组件需要根据month_id生成动态数据，使用computed属性会自动响应month_id的变化：

<script>     
export default {         
  props: ['month_id'],         
  computed: {
    processedMonthInfo() {
      // 基于当前month_id计算返回结果
      return `当前选中月份ID：${this.month_id}`;
    }
  },
  created() {
    console.log(this.processedMonthInfo);
  }    
}
</script>

额外优化（可选） #

父组件中v-if="prayertimeshow"控制子组件显示，首次点击后prayertimeshow一直为true，子组件不会重新创建。如果需要每次点击都重新初始化子组件，可以修改monthId方法（不推荐频繁销毁重建组件，仅特殊场景使用）：

methods:{
  monthId(event) { 
    this.prayertimeshow = false; // 先销毁子组件
    this.$nextTick(() => {
      this.month_id = event; 
      this.prayertimeshow = true; // 再重新创建子组件
    });
  }
}

内容的提问来源于stack exchange，提问作者abu abu