有时候我们需要对prop传递的数据实现双向绑定，而单独使用prop传递数据，只能实现单向的数据传递，

prop父组件传值到子组件

父组件代码

  1. <template>
  2.   <div id="app">
  3.     <child :changeNum="num"></child>
  4.     <button @click="add">增加100</button>
  5.     <bro></bro>
  6.   </div>
  7. </template>

子组件代码

  1. <template>
  2.   <div>
  3.     <div>{{changeNum}}</div>
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   name: "child",
  9.   props: ["changeNum"],
  10.   data() {
  11.     return {
  12.       hello: "hello"
  13.     };
  14.   }
  15. };
  16. </script>

使用.sync修饰符

在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
示例代码如下：

  1. <comp :foo.sync="bar"></comp>

会被扩展为：

  1. <comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

  1. this.$emit('update:foo', newValue)