vue.sync修饰符及示例

在实际的开发中，我们常常会遇到父子组件之间双向绑定的问题。鉴于数据的可维护性，vue规定组件不能修改外部数据。vue推荐以 update:myPropName 的模式触发事件取而代之。在此，你需要知道vue的另外两个规则：①this.$emit可以触发事件，并传参；②$event可以获取this.$emit的参数。

父组件：

<template>
  <div id="app">
    你好，我有{{ allMoney }}元
    <Child :childMoney.sync="allMoney" />
    <!-- :childMoney.sync等价于下面这段代码： -->
    <!-- <Child :childMoney="allMoney" v-on:update:childMoney="allMoney = $event" /> -->
    <!-- 此处update:childMoney是子组件中$emit('update:childMoney', childMoney - 100)的第一个参数 -->
  </div>
</template> 

<script>
import Child from './components/Child'
export default {
  data() {
    return { allMoney: 10000 }
  },
  components: { Child },
}
</script>

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

子组件

<template>
    <div class='red'>
        你现在有{{ childMoney }}元钱，
     <br>
      <button @click="$emit('update:childMoney', childMoney - 100)">打钱</button>
        <!-- childMoney-100是变化操作，结果作为参数返回给$event -->
        给我{{ n }}元钱，你还剩{{ childMoney }}
    </div>
</template>

<script>
 export default {
    props: ['childMoney'],
    data() {
        return { n: 100 }
    },
}
</script>

<style>
.red {
    border: 1px solid blue;
    padding: 5px;
}
</style>