Parent Component Code:
<!-- -->
<template>
<div class=''>
<El-link type = "danger"> Object transfer is: </ el-link>
<div>
Display fatherData value parent components: {{fatherData}}
<l0705components :fatherData="fatherData"></l0705components>
</div>
<br><br><br>
<El-link type = "danger"> is a string transfer, v-model using traditional values: </ el-link>
<div>
Display fatherData2 value parent components: {{fatherData2}}
<l0705components v-model="fatherData2"></l0705components>
</div>
<br><br>
<El-link type = "danger"> string is passed: </ el-link>
<div>
Display fatherData3 value parent components: {{fatherData3}}
<l0705components :fatherData3="fatherData3"></l0705components>
</div>
</div>
</template>
<script>
import l0705components from './views/l0705components'
export default {
name: "L0705L",
components: {
l0705components
},
data() {
// store the data here
return {
fatherData:{
name: "John Doe"
age:"14"
},
fatherData2: 'data parent element 2'
fatherData3: 'parent data component 3'
}
}
}
</script>
Subcomponents Code:
<!-- -->
<template>
<div class=''>
<div v-if="fatherData">
Display subassembly fatherData value: {{fatherData}}
<el-button type="danger" @click="changeFather">
Click Modify the value of the parent component fartherData - Name changed to "King of Five"
</el-button>
</div>
<div v-if="value!==''">
<input v-model="value">
</div>
<div v-if="fatherData3!==''">
Display subassembly fatherData3 value: {{fatherData3}}
<el-button type="danger" @click="changeFather3">
Click to modify the value of the parent component fartherData3, the words "ha ha ha ha ha"
</el-button>
</div>
</div>
</template>
<script>
export default {
props:{
fatherData:{
type:Object
},
value: {
type: String,
default: ''
},
fatherData3: {
type: String,
default: ''
}
},
name: "l0705components",
data() {
// store the data here
return {
}
},
// set of methods
methods: {
changeFather(){
this.fatherData.name = 'Wang Wu'
},
changeFather3() {
this.fatherData3 = 'ha ha'
}
}
}
</script>
Page impressions:
Test results show that:
1. The parent component is passed an object, receiving sub-assembly, subassembly, directly modify the values to the inside of the object, it can be modified, the value of the component will change with his son
2. v-model by value, modify the value inside the input, being given
Value means that props can not be modified transmission
3. Click Modify third value, modify subassemblies value, but the parent components can not be changed, an error
to sum up:
When the parent-child transmission component values, and parameters passed parent component, and an array of objects, after receiving the subassembly may be modified directly, and passed to the corresponding parent element also modifies the value.
If the value passed a string, directly modify the error.
Not recommended parameters subassemblies directly modify the parent components, sub-assemblies to avoid this parameter multiple references, causes abnormal data can not be found