「前端学习」 Vue 中的 .sync 修饰符

1. 背景

如果日常生活中, 爸爸给儿子打生活费. 流程是儿子打电话(触发事件)向爸爸要生活费, 因为钱(数据)是在爸爸手里. 这里把爸爸看着父组件, 然后儿子看做子组件.在vue中子组件不能直接修改props的外部数据, 因此需要通过$emit触发事件(打电话), 并传参(需要钱的金额), 然后爸爸可以通过$event获取儿子通过$emit事件传过来的参数.从而知道儿子需要打生活费了, 然后转给儿子相应金额的钱, 然后家里收入需要减去改该部分金额.

2. 代码实现

Father.vue

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

<script>
    import Child from "./components/Child.vue";

    export default {
        components: {
            Child
        },
        data() {
            return {
                total: 10000
            }
        }
    }
</script>

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

<Child :money.sync="total"/>是一个语法糖, 使得易懂好写, 完整形式为<Child :money="total" v-on:update:money="total = $event"/>

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>

值得注意的是, <button @click="$emit('update:money', money - 100)">中的update:money, update部分是固定写法, 然后money是对应Father.vue中<Child :money.sync="total"/>的绑定属性money