VUE WATCH指令

 需求：  从父组件传递给子组件的时候，一般我们是有三个方法

   1.使用的prop组件

   2.直接调用子组件的方法，将参数传递到子组件中

   3.使用$attr和$listeners属性

 

 1. 使用props属性

    1. 引用子组件

 

import cmRentSettleCategoryComponent from "./cmRentContractSettleCategoryComponent";
export default { 
components: {
    cmRentSettleCategoryComponent,
    cmRentContractSettleDedComponent
  },
}

    2.引用子组件，其中parentSettleObj是传入子组件的参数，this.temp是一个复杂对象

<cmRentSettleCategoryComponent
                  ref="cmRentSettleCategory"
                  :parentSettleObj.sync="this.temp"
                ></cmRentSettleCategoryComponent>

     3. 子组件中接收父组件的参数

props: {
    parentSettleObj: []
  },

  这样一般基本数据就可以接收到了，但是props属性是无法进行修改的，由于我这个对象是一个复杂对象，里面会包含其他的对象，并且传入参数this.temp会不断的变化，props属性只有在create的时候进行数据传递，所以无法根据父组件的内容进行动态加载

 于是加入了一个监听器，其中deep 表示深度监听，属性中的每个字段的值变化的时候会进行触发，另外对于复杂数据类型，由于VUE是用引用的关系，所以newv和oldv的属性值并不是修改前和修改后，笔者测试应该是引用同一个对象

watch: {
    parentSettleObj: {
      immediate: true,
      deep: true,
      handler(newv, oldv) {
        if (newv == null) {
          this.dataList = [];
        }
        this.settleObj = newv;
        if (this.settleObj.id != null) {
          this.query.settleId = this.settleObj.id;
          this.query.contractId = this.settleObj.contractId;
          if (oldv == null || oldv.id == null || this.settleObj.id != oldv.id) {
            this.queryData();
          }
        }
      }
    }
  },

2.直接调用子组件的方法，将参数传递到子组件中

  这个方法比较简单，只有比如点击某个按钮的时候触发 

  直接引用组件并且通过按钮直接调用

 <cmRentExtensionInfo ref="cmRentExtensionInfo" />

 this.$refs.cmRentExtensionInfo.loadData(cmObj);

 

3.使用$attr和$listeners属性

   待更新