Vue中.sync修饰符的用法

应用场景

在实际开发过程中，有可能出现这样的场景：

• 存在父子组件，假设父组件名为：ParentComponent，子组件名为：ChildComponent
• 在父组件ParentComponent中定义有数据：ParentData
• 在子组件ChildComponent中使用到父组件中的数据ParentData
• 父组件中的数据ParentData需要根据子组件中的数据使用情况进行更新

场景中的问题

Vue规定组件不能修改props外部数据，在上述场景中即为子组件不能直接修改父组件中的Parentdata。

解决方法

• 在子组件中使用this.$emit触发事件并传参，代码实例如下：

<template>
    <div class="ChildComponent">
        {{ParentData}}
        </button @click="$emit("update:data)", fn(ParentData)>
        do fn() to the ParentData
        </button>
    </div>
</template>
<script>
export default {
    props: ["ParentData"]
}
复制代码

• 在父组件中使用$event获取$emit参数，代码实例如下：

<template>
    <div class="ParentComponent">
        父组件data为 {{ParentData}}
        <ChildComponent :data="Parentdata" v-on:update:data="Parentdata" = $event"/>
    </div>
</template>
<script>
import Child from "./ChildComponent.vue"
export default {
    data() {
        return { ParentData: something }
        },
        components: {ChildComponent: ChildComponent}
}
</script>
复制代码

.sync语法糖

Vue提供.sync修饰符语法糖将ParentComponent中有关ChildComponent中使用ParentData的语句进行封装，即使用:

<ChildComponent :data.sync="ParentData"/>
复制代码

代替

<ChildComponent :data="Parentdata" v-on:update:data="Parentdata" = $event"/>
复制代码

Vue其他修饰符

• @click.stop = “xxx”，阻止事件冒泡
• @click.prevent = “xxx”，阻止默认事件
• @keypress.enter = “xxx”，当键盘按下【回车键】时执行对应内容