双向数据绑定与父子组件通信：v-model与.sync详解

v-model

• v-model能够实现双向数据绑定（数据model改变会自动响应到UI层，UI层的数据改变能够同步到model层），一般用在表单的双向数据绑定。
• v-model会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。

---在表单上---
<input v-model="searchText"/>
等价于：
<input :value="searchText" @input="search=$event.target.value">

---在组件上---
<Son :value="searchText" @input="fatherChange"/>  

Vue.component('Son',{
    props:['value'],
    template:`
     <input :value="value" @input="$emit('input',$event.target.value)">
    `
    //$event.target.value将作为父组件fatherChange()的第一个参数；
})

.sync修饰符

- .sync主要用来实现父子组件间数据的双向传递。

• vue 中是不推荐使用双向数据传递的，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源，会带来维护上的问题。
• 本质还是个语法糖但是有局限性
• 适用于：触发事件返回的值 正是 属性要改的值，一般是单一属性。比如触发事件返回的值正好就是提title的新值
• 更多逻辑的话，就不适用了
• 更适用于：非表单类的组件

---在没有.sync时，使用如下方式实现子组件修改父组件的数据---
<Son :title="Father.title" @update:title="fatherChange"/>

Vue.component('Son',{
    props:['title'],
    template:`
        <div @click="$emit('update:title',newTitle)">{{title}}</div>  
    `
     // newTitle将作为父组件fatherChange()的第一个参数；
})

---.sync修饰符---
<Son :title.sync="Father.title"/>   //无需再监听update:value事件，但子组件需派发对应的自定义事件

Vue.component('Son',{
    props:['title'],
    template:`
        <div @click="$emit('update:title',newTitle)">{{title}}</div>
    `
})

总结

• v-model默认情况下为value+input的组合，.sync为任意组合。
• v-model 常用在表单中；.sync 主要用在父子组件通信中，子组件需要修改父组件数据时。
• v-model不能修改外部传进来的props，如果要实现props的双向数据绑定，则需要使用.sync。
• 可以将 v-model 理解成.sync 的一种特殊情况，二者底层的实现机制类似；v-model 做了数据传递+修改的工作；.sync 更多的是数据传递，修改需要交给用户自己。