关于Vue.sync修饰符的理解

vue.js中的.sync修饰符

// 父组件
<template>
  <div class="app">
      {{total}}
    <!-- <Child :money= "total" v-on:useMoney="total=$event" /> -->
    <!-- <Child :money= "total" v-on:update:money="total=$event" /> -->
    <Child :money.sync="total" />
    <!-- 第六行是将第5行的替换，效果一样 -->

    <!-- <Child :money="total" @update:money="val => total = val"></Child> -->
  </div>
</template>

// 子组件
<template>
  <div class="child">
      {{money}}
      <!-- <button @click="$emit('useMoney', money-100)">花钱</button> -->
      <button @click="$emit('update:money', money-100)">花钱</button>
  </div>
</template>

<script>
export default {
    props: ['money']
}
</script>

其实.sync就是将子组件中的内容同步更新到父组件中,是个语法糖。如果不使用.sync就像上面注掉的一样实现，子组件$emit,父组件$event

首先父组件给子组件传递一个值，子组件接收，子组件通过$emit去发布事件，传递参数。 父组件@update:money监听事件

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync, 我们也可以props传初始值，然后事件监听