通过上一节的学习，我们了解到了在Vue的组件中数据传递： prop 向下传递，事件向上传递 。意思是父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。但Vue中， props 是单向数据绑定，虽然在Vue 1.0版本中，通过 .sync 能实现双向数据绑定。但 .sync 在几个版本中被移除，尽管在2.3版本重新引入 .sync 修饰符，可这次引入只是作为一个编译时的语法糖存在。如果直接使用 .sync 修饰符来做双向数据绑定，会报警告信息。那么我们如何在组件中实现双向数据绑定呢？这一节我们就来学习这方面的相关知识。
实现组件双向数据绑定
在上一节中最后的示例使用的是Vue 1.0版本中的 .sync 实现数据双向绑定。那我们先来看看抛弃 .sync 修饰符来实现组件双向数据绑定的工作： 通过Vue提供的机制，绕开直接修改 prop 来实现组件双向数据绑定 。
其思路大致是这样：
在数据渲染时使用 prop 渲染数据
将 prop 绑定到子组件自身的数据上，修改数据时修改自身数据来替代 prop
watch 子组件自身数据的改变，触发事件通知父组件更改绑定到 prop 的数据
这样做的好处是： 父组件数据改变时，不会修改存储 prop 的子组件数据，只是以子组件数据为媒介，完成对 prop 的双向修改 。
继续拿上一节的示例来举例，只不过接下来的示例，并没有使用 .sync 来实现双向数据绑定的效果。
修改的代码如下：
<div id="app">
<div class="parent">
<h3>父组件Parent数据</h3>
<ul>
<li>
<label>姓名:</label>
<span>{{ name }}</span>
<input type="text" v-model="name" />
</li>
<li>
<label>年龄:</label>
<span>{{ age }}</span>
<input type="number" v-model="age" />
</li>
</ul>
</div>
<child :my-name="name" :my-age="age" @update:my-name="val => name = val" @update:my-age="val => age = val"></child>
</div>
<template id="child">
<div class="child">
<h3>子组件child数据</h3>
<ul>
<li>
<label>姓名</label>
<span>{{ myName }}</span>
<input type="text" v-model="childMyName" />
</li>
<li>
<label>年龄</label>
<span>{{ myAge }}</span>
<input type="number" v-model="childMyAge" />
</li>
</ul>
</div>
</template>在上面的这个示例中，我们并没有使用 .sync 修饰符，但在调用子组件的时候使用了 @update ：
