前言：请在 PC 浏览器下获得最佳阅读体验

预知知识：

new Vue({
  data(){return {}},
  components:{},
  props:[]
})
@click = ""
$emit():
  1. data(){}：保存数据的对象
  2. components：保存组件的对象
  3. props：保存父组件传来的数据
  4. @click：@是指令 v-on 的缩写。click 是点击事件(在模板里使用)
  5. \$emit()：触发当前实例上的事件(通常是第一个参数)。附加参数都会传给监听器回调(结果赋值给\$event)。

sync

sync 同步：这个同步说的是数据之间的同步。

需求：用Vue模拟 使用余额宝付款完,让余额宝更新到最新金额

1. 余额宝是一个父组件,有money一个数据
2. 付款是一个子组件,引用余额宝父组件的money数据

.sync修饰符主要目的是子组件引用父组件数据,父组件数据在子组件里产生了变化告诉父组件,让父组件数据改为
变化后的数据。由于子组件引用了父组件的数据,所引用的数据自然会更改

代码逻辑：

  1. 父组件：余额宝.vue

    <template>
  <div>
    余额宝组件
    <br />
    余额：{{money}}
    <hr />
    <Pay :payMoney.sync="money"/>
  </div>
</template>

<script>
  import Pay from "./Pay.vue";
  export default {
    data() {
      return { money: 1000 };
    },
    components: { Pay }
};
</script>

<style>
</style>

    Pay 是子组件。payMoney是在子组件定义的引用父组件money。

  2. 子组件：付款框.vue

    <template>
  <div>
    付款组件
    <br />
    付款金额:100元
    <br />
    余额宝 可用余额：{{payMoney}}
    <button @click="$emit('update:payMoney',payMoney-100)">
      <span>付款</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["payMoney"]
};
</script>

<style>
</style>

    点击button执行$emit()函数,该函数会触发当前实例上一个事件,附加参数都会传给监听器回调。
payMoney-100产生的结果会赋值到$event。
sync执行时调用$event赋值给父组件数据,父组件数据修改后子组件所引用的数据自然会更改

  3. sync 修饰符原理

    先看$emit()做了什么
1 ：$emit(事件,结果)：$emit执行后触发事件把附加参数(结果)传给监听器回调
    $emit会触发了第一个参数'事件',那我监听这个事件是不是就知道子组件是在什么时候想要更改数据？
    $emit会把第二个参数'结果'传给监听器回调使用。那我在父组件监听该事件就知道了数据变化后的结果了
2 ：v-on:事件="父组件数据=$event"  :v-on监听了该'事件'然后修改了父组件数据。$event是$emit第二个参数
结果的值

那.sync这个修饰符做了什么？
因为2这个步骤太常用了.sync修饰了它;.sync === v-on:事件='修改数据'

如果不用.sync的话。子组件点击触发事件,父组件监听事件即可
@click="$emit('payMoney',payMoney-100)"

<Pay :payMoney="money" v-on:update:payMoney="money=$event">

当然选择.sync修饰符
@click="$emit('update:payMoney',payMoney-100)"
<Pay :payMoney.sync="money">

注意：使用sync修饰符触发的事件要以 update:开头

总结：

  1. .sync 主要目的是在子组件引用父组件数据产生了修改同步到父组件上
  2. \$emit()函数,触发事件并且附加参数给监听器回调用
  3. 使用.sync 修饰符会监听\$emit 所触发的事件并且更新父组件的数据
  4. 使用.sync 修饰符时\$emit()所触发的事件要以’update:‘开头。