Seeing that many people are asking this question, I deliberately turned over the previous notes and wrote a more detailed blog post for your reference
In some cases, we may need to "two-way binding" a prop (property through which the parent and child components pass data).
The functions provided by the .sync modifier in vue 1.x. When a child component changes the value of a prop with .sync, the change will also be synchronized to the value bound in the parent component.
This is convenient, but it can also cause problems because it disrupts the one-way data flow. (Data flows from top to bottom, events go from bottom to top)
Since the code for sub-components to change props is the same as that of ordinary body change codes, when you look at the code of sub-components, you don't know it is suitable. Change the state of the parent component.
<comp :foo.sync="bar"></comp>
Will be expanded to:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
When the child component needs to update the value of foo, it needs to explicitly trigger an update event:
this.$emit('update:foo', newValue)
Suddenly I can't understand it. Below we use an example (the closing event of the pop-up window) to illustrate how this code is used.
<template>
<div class="details">
<myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
template: `<div v-if="show">
<p>默认初始值是{
{show}}，所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>`,
props:['show'],
methods: {
closeDiv() {
this.$emit('update:show', false); //触发 input 事件，并传入新值
}
}
})
export default{
data(){
return{
valueChild:true,
}
},
methods:{
changeValue(){
this.valueChild = !this.valueChild
}
}
}
</script>
The function of the vue modifier sync is: when a child component changes the value of a prop, the change will also be bound to the parent component. If we don't use .sync, we want to do the pop-up function above, we can also pass the initial value in props, and then monitor the event, which is not too complicated to implement. Here is implemented with sync, just to provide you with an idea to let them understand other implementation principles, there may be other complex functions applicable to sync.
The front-end learning is not done overnight. Without stepping, there is no way to reach thousands of miles. Continuous efforts can make you and me gain something. If you also like the front-end and are working hard like me, you may wish to take a look at my top article, hoping to make progress with you.