1.什么是.sync

1.1 官网解释

.sync 修饰符实际上是一个语法糖

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。

1.2 我的理解

子组件通过 props 引入父组件的一个数据，当子组件要修改这个数据时，不能自己擅自修改，需要告诉父组件，让父组件修改这个数据，如果允许子组件修改父组件的数据，就等于说这个数据随便谁都能改，这就乱套了，到时候谁改的也不知道。

2.引入例子理解

例子:爸爸给儿子 money，儿子可以看到 money 具体多少，但是儿子想花钱的时候不能直接花钱，于是呢，需要触发一个事件“我要花钱”，爸爸监听事件，发现这个事件通过 $ event 接受儿子传过来的参数

parent-1.vue
<template>
  <div class="app">
    <div>
      爸爸现在我有{{ total }}元钱
      <hr />
      <Child1 :money="total" v-on:update:money="total = $event"></Child1>
    </div>
  </div>
</template>>

<script>
import Child1 from "./child-1.vue"
export default {
  components: { Child1 },

  data() {
    return {
      total: 10000
    }
  }
}
</script>

注意： :money="total"的意思是 money 这个外部值传入的是 total 这个变量，传变量需要前面加：
用$event 来接受子组件传过来的参数

child-1.vue
<template>
  <div class="child">
    {{ money
    }}<button @click="$emit('update:money', money - 10)">我要花钱</button>
  </div>
</template>>

<script>

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

由于 v-on:update:money="total = $event"太长了，进一步用.sync 修饰符优化

parent-1.vue
<template>
  <div class="app">
    <div>
      爸爸现在我有{{ total }}元钱
      <hr />
      <Child1 :money.sync="total" ></Child1>
    </div>
  </div>
</template>>

<script>
import Child1 from "./child-1.vue"
export default {
  components: { Child1 },

  data() {
    return {
      total: 10000
    }
  }
}
</script>

总结

Vue 规则 1:组件不能修改 props 外部数据
Vue 规则 2: $emit 可以触发事件，并传参<br /> Vue 规则 3:$ event 可以获取$emit的参数