Vue之.sync 修饰符详解

背景交代

在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的prop的值时，这个变化也会同步到父组件中所绑定的值。

这很方便，但也会导致问题，因为它破坏了单向数据流。（数据自上而下流，事件自下而上走）

由于子组件改变 prop 的代码和普通的状体改动代码毫无区别，所以当你光看子组件的代码时，你完全不知道它合适悄悄地改变了父组件的状态。

这在 debug 复杂结构的应用时会带来很高的维护成本。于是我们在 vue 2.0 中移除了 .sync 。
但是在实际应用中，我们发现 .sync 还是有其适用之处的，比如在开发可复用的组件库时。 我们需要做的只是 让子组件改变父组件状态的代码更容易被区分。
于是从 vue 2.3.0 开始，我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。他会被自动扩展为一个 自动更新父组件属性的 v-on 监听器。

理解

示例代码：

<comp :foo.sync="val ">comp>

会被拓展为：

<comp :foo="bar" @update:foo="val = $event">comp>

当子组件需要更新 foo 的值的时候，他需要显示的触发一个更新事件：

this.$emit( “update:foo”, newValue );

注意：
有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。
v-bind与.sync一起使用时不能简写为：html:.sync="doc.title"

示例

<template>
    <div class="details">
        <myComponent :show.sync='valueChild'>myComponent>
        <button @click="changeValue">togglebutton>
    div>
template>

<script>
import Vue from 'vue'
Vue.component('myComponent', {
      template: `

                    
默认初始值是{{show}}，所以是显示的
                    关闭
                 
`,
      props:['show'],
      methods: {
        closeDiv() {
          this.$emit('update:show', false); //触发 input 事件，并传入新值
        }
      }
})
export default{
    data(){
        return{
            valueChild:true,
        }
    },
    methods:{
        changeValue(){
            this.valueChild = !this.valueChild
        }
    }
}
script>

参考资料：

https://cn.vuejs.org/v2/guide/components-custom-events.html