Why is sync super sweet?
Because it is very easy to use, you can use sync to make the child component change the value passed by the parent component, that is, you can change the variable in the props in the child component, hehe, so that the child and parent components can be synchronized.
How to use it?
First pass the value from the parent component, and add the .sync suffix when passing the value
<son :fromFather.sync="fromSon"></son>
data(){
return{
fromSon:"父组件的值"
}
},
The child component receives and sets the fromFather variable passed by the change
//props
props: {
fromFather: {
type: String,
default: ''
},
},
//页面
<el-button @click="change">改变他</el-button>
<div>{
{
fromFather}}</div>
//按钮的change事件来改变fromFather的值
change() {
this.$emit('update:fromFather',"我可以改变了！！")
}
The final result:
so we can change the value passed by the parent component props in the child component.
What is the principle of realization?
In fact, when we pass the value of the parent component, we also set an event for the passed value of the child component to the parent component-update:fromFather. So it can be changed in both directions.