深入理解Vue修饰符.sync

通过查看Vue的文档，可以得知，因为我们经常在有些情况下，需要在子组件中修改外部的元素，又不能自己自己修改，只能通知父组件修改。子组件中绑定$emit事件，父组件中监听子组件。

如下面的例子：

爸爸给儿子钱，儿子要花钱，应该怎么办？

答：儿子打电话（触发事件）给爸爸说：我要花钱

这个例子就是子组件不能自己修改数据，要通过触发事件来通知父组件修改数据。

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: 3px solid green;
    }
</style>

Child组件中，有一个外部数据money，开头显示money，还有一个叫花钱的按钮，这个按钮绑定了一个'update:money'的事件，只要点击按钮，就花100，并将显示剩下的钱money-100。

App.vue:

<template>
    <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update: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>

效果显示如下：

点击“花钱”之后

App组件中显示显示“我现在有”的钱：{{total}}，在显示子组件Child，将total这个变量传给money，并监听'uodate:money'事件，然后使用尤雨溪给的资格$event变量就可以知道Child中还剩下的钱的值。

由于这种情况非常常见，所以Vue就封装了一个修饰符——.sync。使用方法为：

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

等价于

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

所以说.sync修饰符就是一个语法糖。由此我们可以得知Vue的三大规则：

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