Vue中.sync修饰符的作用

1.vue规则

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

2.一个场景

2.1场景描述

• 父组件有10000元
• 子组件引用父组件的10000元
• 子组件每次点击按钮会花掉10元
• 子组件和父组件显示的余额发生相同的变化

2.2不使用.sync修饰符的写法

// 父组件
<template>
    <div class="app">
        App.vue 我现在有 {{total}}
        <hr>
        <!-- 这里的 update:money 是一个字符串 -->
        <!-- 通过 v-on: 绑定 update:money 事件 -->
        <!-- 使用 $evet 接收子组件传递的参数 -->
        <Child :money="total" v-on:update:money="total = $event"/>
    </div>
</template>

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

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

// 子组件
<template>
    <div class="child">
        {{money}}
        <!-- 通过 $emit 触发父组件上的 update:money 事件 -->
        <!-- ，第一个参数为事件名称，第二个参数为参数的返回结果 -->
        <button @click="$emit('update:money', money-10)">
            <span>花钱</span>
        </button>
    </div>
</template>

<script>
    export default {
// 接受父组件传来的 money 属性
// 子组件是不能直接修改的，需要通过 $emit 触发的方式去更改该属性
        props: ["money"]
    };
</script>

<style>
    .child {
        border: 3px solid green;
    }
</style>
复制代码

点击3次，结果如图

2.3使用.sync修饰符的写法

// 父组件如下，子组件不变
<template>
    <div class="app">
        App.vue 我现在有 {{total}}
        <hr>
        <!-- 简化了代码书写方式 -->
        <Child :money.sync="total"/>
    </div>
</template>

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

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

3..sync的作用

• 上述场景中，如果不使用.sync修饰符，那么父组件就要写 <Child :money="total" v-on:update:money="total = $event"/>；

• 用了.sync修饰符，那么父组件只要写<Child :money.sync="total"/>，简化了代码

• 而像子组件要修改props的属性，但子组件又不能直接修改，必须在修改之后通知父组件修改了props属性的场景很常见.

• 所以.sync修饰符的存在很有必要