前言：见多了父组件向子组件传递数据，子组件向父组件传递数据，现在来玩玩父组件与子组件之间双向数据绑定，还有通过.sync修饰符，来优化这种写法。
方法一：对象的引用关系
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<div id="box">
<new-input v-bind:person="freddy" ></new-input>
{{freddy.name}}
</div>
<script>
Vue.component('new-input',{
props: ['person'],
template:'<label><input type="text" v-model="person.name" /> 你的名字：</label>'
});
new Vue({
el:'#box',
data: {
freddy: {
name:'freddy'
}
}
});
</script>
</body>运行结果：
该方法运用的是对象的引用关系，来实现的。虽然实现起来很简单，但是还是存在数据混乱的隐患。使用时要比较小心。
方法二：父子组件之间的数据传递
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<div id="box">
<new-input v-bind:name="name" v-on:update:name="getNewName"></new-input>
{{name}}
</div>
<script>
Vue.component('new-input',{
props: ['name'],
data: function(){
return {
newName: this.name
}
},
template:'<label><input type="text" @keyup="changeName" v-model="newName" /> 你的名字：</label>',
methods: {
changeName: function(){
this.$emit('update:name',this.newName);
}
}
});
new Vue({
el:'#box',
data: {
name:'freddy'
},
methods:{
getNewName: function(newName){
this.name = newName;
}
}
});
</script>
</body>运行结果：
稍微提一下的是，通过props，父组件向子组件传递了那么name值，然后通过注册'update:title'事件给父组件传递新的name值。
这里为什么要注册一个'update:title'这么复杂的事件名称呢？这其实跟下面要说的.sync修饰符有关
还有一点比较重要的是
<new-input v-bind:name="name" v-on:update:name="getNewName"></new-input>
可以简写成
<new-input v-bind:name="name" v-on:update:name="name = $event"></new-input>
方法三: .sync
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<div id="box">
<new-input v-bind:name.sync="name"></new-input>
{{name}}
</div>
<script>
Vue.component('new-input',{
props: ['name'],
data: function(){
return {
newName: this.name
}
},
template:'<label><input type="text" @keyup="changeName" v-model="newName" /> 你的名字：</label>',
methods: {
changeName: function(){
this.$emit('update:name',this.newName);
}
}
});
new Vue({
el:'#box',
data: {
name:'freddy'
},
methods:{
getNewName: function(newName){
this.name = newName;
}
}
});
</script>
</body>运行结果
通过与方法一进行比较：会发现
<new-input v-bind:name="name" v-on:update:name="name = $event"></new-input>
被简化成了
<new-input v-bind:name.sync="name"></new-input>
而其他代码不变。
所以我们在使用.sync修饰符的时候，只需要注意，v-bind:xx，v-on:update:xx，v-bind:xx.saync的差异就行了。
而且注册事件的时候一定要用this.$emit( 'update:xx' );