Vue的规定

在Vue的父子组件触发事件通信的过程中，有以下几条规则

.sync 的用法规则

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

Vue 的组件在接受外部数据 props 时，Vue 规定，子组件在通过 props 接受外部数据后只有使用该数据的权利，但没有修改该属性的权利。因此 Vue 规定组件只能有权使用 props 的属性，想要改变，就必须通知该数据的真正拥有者，也就是使用该组件的父文件

.sync 修饰符的作用

简化了父子组件之间数据通信的代码书写方式，对 prop 进新双向绑定。

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修饰符的存在很有必要 vue文档-.sync