The vue subcomponent listens to the data changes of the parent component and makes changes (pro-test is effective)
1. Questions
1.1 When encapsulating components, it is often encountered that subcomponents need to change according to the data of the parent component and execute the corresponding operation logic
1.2 Adding parameters such as deep and immediate to the monitoring method to monitor arrays/objects still does not take effect
1.3 The type table component needs to update the table data according to the data change of the parent component
1.4 Dynamic rendering of components based on data requires real-time monitoring of parent component changes
1.5 Using $refs Sometimes it is difficult to find the ref of nested components
2. Idea
2.1 The main idea of this article is to provide / inject
2.2 When creating a parent component, no matter how many levels of child components there are, data interdependence can be performed
2.3 Then the component can use this dependency to monitor the data of the parent component
3. Solutions
3.1 First define provide in the parent component, the code is as follows
//父组件提供参数给子组件（响应式时需设置为对象）
provide(){
return {
superParams:this
}
},
data(){
//定义几个参数
return {
test:{
testLevel1:{
testLevel2:''
}
},
testList:[]
}
}
3.2 Add inject to the subcomponent, the code is as follows
// 子组件：childrenComponent1
inject: ['superParams'],
watch:{
//监听数据变化
'superParams.test':{
immediate:true, // 将立即以表达式的当前值触发回调
handler:function (val,oldVal) {
console.log("监听test对象");
console.log(val,oldVal);
},
deep:true,
},
'superParams.test.testLevel1':{
immediate:true, // 将立即以表达式的当前值触发回调
handler:function (val,oldVal) {
console.log("监听testLevel1属性");
console.log(val,oldVal);
},
deep:true,
},
'superParams.test.testLevel1.testLevel2':{
immediate:true, // 将立即以表达式的当前值触发回调
handler:function (val,oldVal) {
console.log("监听testLevel1属性");
console.log(val,oldVal);
},
deep:true,
},
'superParams.testList':{
immediate:true, // 将立即以表达式的当前值触发回调
handler:function (val,oldVal) {
console.log("监听testList数组");
console.log(val,oldVal);
},
deep:true,
}
}
3.3 Another child component triggers the data change of the parent component (the same/different levels can be triggered)
// 子组件：childrenComponent2
inject: ['superParams'],
mounted(){
this.superParams.test.testLevel1.testLevel2 = 'testLevel22';
this.superParams.testList.push({
test:'test'})
}
Example 1 (subcomponents are displayed in order): display childrenComponent2 first, then childrenComponent1, (the data in the figure below is output after childrenComponent1 is displayed) and the result is shown in the figure
Example 2 (all child components are displayed, triggering data update in the parent component or elsewhere)
Add a button click trigger method code in the parent component as follows
updateText(){
console.log("Text数据更新");
this.test.testLevel1.testLevel2 = 'testLevel22';
this.testList.push({
test:'test'})
}
The result is shown in the figure below
Notice
- The data of the monitoring method of the current component has changed, but the component has not been updated. In this case, you need to find the reason for the update in the component itself
- The listening method is initialized when the component is displayed
- There are multiple layers of monitoring problems for objects, and the entire object can be monitored
- As to whether there will be leakage monitoring of the array, the changes of the array can be monitored when calling the pop, push, shift, unshift, splice, sort, reverse and other methods of the array.
- immediate, deep to understand
Replenish
For point 1, take the el-input-number (element ui) component as an example
<el-input-number v-model="item.max" @change="handleChange" :min="0" :key="Math.random()" :max="superParams.max"></el-input-number>
Before adding: key="Math.random()", the component does not change with the parent component data (superParams.max)
After adding, it can be dynamically changed according to the data of the parent component
The parent component changes the parameter value code as shown in the figure below
'formData.isTrue':function (val,oldVal) {
if(val){
this.max = 100;
}else {
this.max = 50;
}
},
Not all components can be used: key="Math.random()", some components will freeze or cannot enter values after use