Since vue is a one-way data flow, in the process of passing values between parent and child components, we can only use props to pass the parent component value to the child component, instead of directly modifying the data passed by props in the child component; if you change the props transfer in the child component The console will report an error if the value is over.
In other words, data is always passed from the parent component to the child component, and the child component cannot modify the value passed by the parent component. If you want to modify the value passed by the parent component, you can only modify the original data through the parent component.
According to the above ideas, we can realize the two-way binding of component passing values. The following methods are summarized:
1. Conventional method
The parent component passes values to the child component through props, and at the same time provides a method to update its own data; the
child component receives the data, and then when the data is modified in the child component, the method of the parent component is triggered to pass the latest value to the parent component.
// 父组件
<template>
<child :msg='msg' :changeMsg='changeMsg'></child>
</template>
<script>
import child from './child.vue';
export default {
components:{
child };
data(){
return {
msg:0
}
},
methods:{
changeMsg(data){
this.msg = data;
}
}
}
</script>
// 子组件
<template>
<div>
<el-input :value='msg' @input='change($event)'></el-input>
</div>
</template>
<script>
export default {
name:'child',
props:{
msg:[Number,String],
changeMsg:Function //参数形式传递方法
},
methods:{
change(e){
this.changeMsg(e);
}
}
}
</script>
There is a similar method: the parent component passes the value to the child component through props and provides a method to update its own data. When the child component modifies the value, it triggers the parent component method through $emit and passes the latest value.
Two, the .sync modifier
The parent component uses .sync two-way binding, and the child component uses $emit to trigger the update:prop name to modify the data of the parent component to achieve two-way binding.
// 父组件
<template>
<child :msg.sync='msg'></child>
</template>
<script>
import child from './child.vue';
export default {
components:{
child };
data(){
return {
msg:0
}
},
methods:{
changeMsg(data){
this.msg = data;
}
}
}
</script>
// 子组件
<template>
<div>
<el-input :value='msg' @input='change($event)'></el-input>
</div>
</template>
<script>
export default {
name:'child',
props:{
msg:[Number,String]
},
methods:{
change(e){
// update为固定字段，通过冒号连接msg，将e传递给父组件的变量
this.$emit('update:msg',e);
}
}
}
</script>
The .sync modifier is a shorthand:
<child :msg.sync='msg'></child>
//相当于
<child :msg.sync='msg' @update:msg='msg=e'></child>
Three, v-model
Syntax sugar of vue custom component v-model:
<child v-model='msg'></child>
//相当于
<child :msg='msg' @input='val => { msg = val }'></child>
So we only need to call the input method to modify the value of the parent component in the child component, where input is the default method.
// 父组件
<template>
<child :msg='msg' v-model='msg'></child>
</template>
<script>
import child from './child.vue';
export default {
components:{
child };
data(){
return {
msg:0
}
}
}
</script>
// 子组件
<template>
<div>
<el-input :value='msg' @input='change($event)'></el-input>
</div>
</template>
<script>
export default {
name:'child',
props:{
msg:[Number,String]
},
methods:{
change(e){
this.$emit('input',e);
}
}
}
</script>
If you don’t want to use input and want to use a custom method to change the value of the parent component, you only need to define a method in the parent component, and configure the model in the child component.
// 子组件
<template>
<div>
<el-input :value='msg' @input='change($event)'></el-input>
</div>
</template>
<script>
export default {
name:'child',
model：{
prop:'msg', //这是父组件传递的值
event:'changeData' //父组件定义的更新自身数据的方法
},
props:{
msg:[Number,String]
},
methods:{
change(e){
this.$emit('changeData',e);
}
}
}
</script>