Vue组件挂载时设置临时数据失效问题求助

我帮你梳理下问题所在，一步步来修复：

1. 核心问题：不能直接修改Props中的obj #

Vue的Props是单向数据流，子组件直接修改父组件传过来的props值，不仅不会同步到父组件，还会触发Vue的警告。正确的做法是在子组件内部定义局部变量，把props的obj值初始化进去，之后操作这个局部变量：

Vue.component('date-picker', {
  template: "<input type='text' class='form-control' placeholder='select date of birth' v-validate=\"'required'\" v-model='localDate'>",
  props: ['date','show','obj'],
  data() {
    return {
      localObj: this.obj || {}, // 初始化局部变量存储日期选择器实例
      localDate: this.date // 绑定输入框的局部数据
    }
  },
  mounted: function() {
    var self = this;
    // 给局部变量赋值，而非直接修改props的obj
    this.localObj = ... // 这里写你的日期选择器初始化逻辑
  }
})

2. 监听show状态变化触发逻辑 #

mounted钩子只会执行一次，如果show是动态切换的，你需要通过watch监听show的变化，当它变为true时执行对应的操作：

Vue.component('date-picker', {
  // ... 保留上面的template、props、data、mounted代码
  watch: {
    show(newVal) {
      if (newVal) {
        // 当show变为true时，使用存储的日期选择器数据
        console.log('调用日期选择器:', this.localObj);
        // 比如执行日期选择器的打开方法：this.localObj.open()
      }
    }
  }
})

3. 修正模板中的绑定错误 #

你的模板有两处需要调整：

• model='date'是Vue 1.x的语法，Vue 2+要改用v-model='localDate'（对应我们定义的局部数据）
• value='obj'会把输入框固定显示字符串"obj"，直接删掉即可，让v-model来管理输入值

额外提醒：父组件要正确传递Props #

确保父组件使用组件时，用动态绑定方式传递props（加冒号:），否则传递的是字符串而非变量：

<date-picker 
  :date="parentDate" 
  :show="isShowPicker" 
  :obj="parentObj"
></date-picker>

这样修改后，就能在show变为true时正常调用你存储的日期选择器数据了。

内容的提问来源于stack exchange，提问作者hema sundar Ginni