需求: 从父组件传递给子组件的时候,一般我们是有三个方法
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属性
待更新