foreword
Currently working on a Vue project, the child component is used to rely on the data of its parent component to perform related requests and page data display of the child component. The rendering of the parent component requires the child component to notify the update of the state of the parent component, and the value transfer between the parent and child components is general. There are three methods:
- father to son
- child's father
- non-parent-child pass-by-value
Notice:
The relationship between parent and child components can be summarized as props are passed down and events are passed up. The parent component sends data to the child component through props, and the child component sends messages to the parent component through events.
Next, we will see it more clearly and understand it more easily through the example code:
Table of contents
1. Pass value from parent component to child component
2. The child component passes the value to the parent component
3. Value transfer between non-parent-child components
1. Pass value from parent component to child component
Parent component code:
<template>
<div>
父组件：
<el-input v-model="val" style="width:300px" />
<child :value="val" />
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'Parent',
data() {
return {
val: '我是父组件'
}
},
components: {
child
},
}
</script>
Subcomponent code:
<template>
<div class="child">
子组件： {
{ value }}
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
props: ['value']
}
</script>
<style scoped>
.child {
margin-top: 20px;
}
</style>
2. The child component passes the value to the parent component
parent component code
<template>
<div>
父组件：
<el-input v-model="val" style="width:300px" />
<child :value="val" @bindMsg='msgFun' />
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'Parent',
data() {
return {
val: '我是父组件'
}
},
components: {
child
},
methods: {
msgFun(childVal) {
console.log(childVal,'childVal')
this.val = childVal
}
}
}
</script>
subcomponent code
<template>
<div class="child">
子组件： {
{ value }}
<el-button @click="$emit('bindMsg', '我是子组件')">点击改变父组建数据</el-button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
props: ['value'],
}
</script>
<style scoped>
.child {
margin-top: 20px;
}
</style>
3. Value transfer between non-parent-child components
.sync can help us realize the two-way binding of the data passed from the parent component to the child component, so the child component can modify it directly after receiving the data, and at the same time modify the data of the parent component
The ref is bound to the child component, and the point of the reference is the instance of the child component. The parent component can actively obtain the properties of the child component or call the method of the child component through ref
parent component code
<template>
<div>
父组件：
<el-input v-model="val" style="width:300px" />
<el-button @click="childRefClick">父组件ref点击</el-button>
<child :value="val" @bindMsg='msgFun' :data.sync='data' ref='child' />
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'Parent',
data() {
return {
val: '我是父组件',
data: ''
}
},
components: {
child
},
methods: {
msgFun(childVal) {
console.log(childVal, 'childVal')
this.val = childVal;
},
childRefClick() {
//ref获取子组件实例的属性和方法
const child = this.$refs.child
console.log(child.name)
child.childBtnClick("调用了子组件的方法")
}
}
}
</script>
subcomponent code
<template>
<div class="child">
子组件： {
{ value }}
<el-button @click="childBtnClick">点击改变父组建数据</el-button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
currenData: {}
}
},
props: ['value', 'data'],
methods: {
childBtnClick(val) {
console.log(val,'val')
this.$emit('bindMsg', val || '我是子组件')
},
},
}
</script>
<style scoped>
.child {
margin-top: 20px;
}
</style>
There are also slot slots, vuex data state managers, etc. for value transfer between non-parent-child components
Summarize
It mainly uses methods of passing values between parent and child components, props, $emit, ref, sync, etc. The value passing between parent and child components is very common. As long as we know how to transfer data between components, for the front-end component extraction There are great benefits in terms of performance improvement.