.sync 修饰符

在一些情况下我们可能要对prop进行"双向绑定",但这样会带来维护上的问题。Vue中的.sync修饰符，就相当于语法糖一样的存在。它会被拓展为自动跟新父组件属性的v-on监听器。 示例如下

 <Child :money.sync="total"></Child>

会被拓展为

<Child :money="total" v-on=update:money="total=$event"></Child>

而子组件跟新money值时，需要触发当前实例上的事件，附加的参数传给监听器回调。

 <button @click="$emit('update:money',money-100)"><span>取钱</span></button>

具体示例如下所示

App.vue

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

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

    };
  },
  components: { 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>
<style>
.child {
  border: 1px solid red;
  padding: 10px;
}
</style>

参考来自于 Vuu.sync修饰符