Vue - 父子组件双向绑定 sync 修饰符

一、概念

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

this.$emit('update:title', newTitle) //仅仅是触发事件，子组件的title值未变

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如：

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

此时，由于doc.title的值更新了，所以子组件的title也会更新。

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

<text-document v-bind:title.sync="doc.title"></text-document>e

二、使用实例

子组件：

<template>
    <div>
        <p>这个是子组件，此时show的值是{{show}}</p>
        <button @click.stop="closeDiv">子组件给父组件更新值为false</button>
    </div>
</template>
<script>
export default {
    props:['show'],
    methods:{
        closeDiv() {
          this.$emit('update:show', false); //触发 input 事件，并传入新值
        }
    }
}
</script>

父组件：

<template>
    <div class="details">
        <h1>vue 父子组件传值sync修饰符</h1>
        <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
        <p>此为父组件 show的值为 {{valueChild}}</p>
        <button @click="changeValue">toggle</button>
        <myComponent :show='valueChild' v-on:update:show="title = $event" style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
        <p>为证明子组件的事件不会改变子组件的值，此为父组件 show的值为 {{valueChild}} title的值为 {{ title }}</p>
    </div>
</template>
<script>
 import myComponent from '@/components/sync-component.vue'

export default{
    components:{myComponent},
    data(){
        return{
            valueChild:true,
            title:'hello world'
        }
    },
    methods:{
        changeValue(){
            this.valueChild = !this.valueChild
        }
    }
}
</script>

 

参考：

https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6