Vue中的.sync 修饰符

使用场景: 在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。

但是 Vue 父子通信是单向数据流，子组件不能直接修改父组件的值。（试想一下，如果某个子组件可以直接修改父组件的某个值，父组件传给其他的子组件的这个值也是修改后的值，这显然是不合理的。）

原始的父子组件传值：

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。

父组件：

用 $event 获取 $emit 传递的第二个参数

<div>{{doc.title}}</div>
<son-1 :title="doc.title" @update:title="doc.title = $event" />

data() {
    return {
      doc:{
        title:"标题"
      }
    }
 },

子组件1：

<button  @click="updateTitle">修改标题</button>

data() {
    return {
      newTitle:"新标题1"
    }
},
methods: {
    updateTitle(){    
      this.$emit("update:title", this.newTitle)
    }
}

点击 修改标题 就会把父组件中渲染的 “标题” 修改成 “新标题1” 。

使用 .sync 修饰符：

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

父组件：

<son-2 :title.sync="doc.title" />

子组件2：

<button  @click="updateTitle">修改标题</button>

data() {
    return {
      newTitle:"新标题2"
    }
},
methods: {
    updateTitle(){    
      this.$emit("update:title", this.newTitle)
    }
}

点击 修改标题 就会把父组件中渲染的 “标题” 修改成 “新标题2” 。

注意 ：带有 .sync 修饰符的 v-bind 不能 和表达式一起使用 (例如 :title.sync="doc.title = $event" 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。

使用 .sync 修饰符设置多个 prop ：

用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：

父组件：

<div>{{doc.title}}</div>
<div>{{doc.name}}</div>
<son-3 v-bind.sync="doc" />

data() {
    return {
      doc:{
        title:"标题",
        name:"zs"
      }
   }
},

子组件3：

<button @click="update">修改数据</button>

data() {
    return {
      newDoc: {
        newTitle:"新标题3",
        newName:"ls"
      }
   }
},
methods: {
    update(){    
      this.$emit("update:title", this.newDoc.newTitle)
      this.$emit("update:name", this.newDoc.newName)
    }
},

点击 修改数据 就会把父组件中渲染的 “标题” 修改成 “新标题3”，“zs” 修改成 “ls” 。