16.Vue 中的 .sync 修饰符有什么用.md

Vue 中的 .sync 修饰符有什么用

在实际开发中，我们可能会遇到如下情况，父组件中的数据需要给子组件进行调用，子组件在触发相应事件后会对该数据进行修改，修改完成后再传给父组件进行显示

红框表示父组件，绿框表示子组件。

---

红框代码为App.vue

<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money="total v-on:updata:money="total=$event"/>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

绿框代码为child.vue

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

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

根据Vue的三个规定：

1. 组件不能修改props外部数据
2. $emit可以触发事件，并传参
3. $event可以获取$emit的参数

子组件$emit('update:money', money-100)"指定了'update:money'变量并传回money-100的值，就可以在父组件中使用total=$event进行接收

显然每次父组件:money="total v-on:updata:money="total=$event"都需要输入如下代码十分不便利，所以Vue帮会我们进行了更好的封装:money.sync="total"

:money.sync="total"等价于:money="total v-on:updata:money="total=$event"