vue 父传子值解决子组件不能时时更新问题

需求做一个侧栏的TAB切换,父组件修改数据子组件接收并更新页面主要为时间切换

今天做了一个父子传值;发现子组件能通过props拿到父组件的值,却不能更亲页面,后来用了watch事件也不行;最后发现只能用watch事件的深度监听

效果:

查看代码:

父组件: (时间列表)

  

          
            

                

                    

                    至
                    

                
            
            
            

               
                
            
        

 父组件data;

 data() {
    return {
      paramsDate: {
            requestId: 54,
            wgDate: "", //用户点时间控件的时候传input
            endDate:'',//结束时间
        },
    };
  },

父组件:srcript

 methods: {
    selectDate() {
      //日期选择
      let self = this;
      $("#my-data").calendar({
        // 日期格式
        dateFormat: "yyyy-mm-dd",
        onChange(p, values, displayValues) {
          self.paramsDate.wgDate = values[0];
          self.paramsDate.requestId = 52;
        }
      });
      $("#my-data2").calendar({
        // 日期格式
        dateFormat: "yyyy-mm-dd",
        onChange(p, values, displayValues) {
          self.paramsDate.endDate = values[0];
          self.paramsDate.requestId = 53;

        },
        onClose() {
          if (self.paramsDate.endDate < self.paramsDate.wgDate) {
            $.toast("结束时间不能大于开始时间!");
          } else {
          }
        }
      });
    },
}

子组件接收值:props

export default {
 
  props: ["paramsDate"],
}

子组件watch深度监听并赋值

 watch: {
    paramsDate: {
      handler(newValue, oldValue) {
        this.params.wgDate = newValue.wgDate;
        this.params.endDate = newValue.endDate;
        this.init();
      },
      deep: true
    }
  }