Vue 中的 .sync 修饰符有什么用
在某种特殊的场景中，我们希望子组件接受的props的值改变从而实现父组件的值改变，但是父组件和子组件两侧都没有明显的变更来源。
这时我们可以使用 模式触发事件取而代之。
- 子组件使用this.$eimt(" update:name "," updateName ")模拟事件
- 父组件使用v-on触发事件，$event可以接受值
示例
<template>
<div>
儿子的名字：{{ name }}
<Child :name="name" @update:name="name = $event" />
</div>
</template>
<script>
export default {
data() {
return {
name: "小明",
};
},
components: {
Child: {
template: `<div>我的名字：{{ name }} <button @click="updateName">改名字</button><div/>`,
props: ["name"],
methods: {
updateName() {
this.$emit("update:name", (name = "小红"));
},
},
},
},
};
</script>
<style scoped>
</style>
示例中
<Child :name="name" @update:name="name = $event" />
可以使用 .sync 修饰符起到一样的作用
<Child :name.sync="name" />
说明：.sync 修饰符 ，就是一个语法糖
代码 <Child :name.sync="name" />会被扩展成<Child :name="name" @update:name="name = $event" />起到相同的效果
