sync 修饰符在Vue中如何使用

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

 

这也是Vue官方推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

this.$emit('update:title', newTitle)

.sync 的使用：

//父组件
<template>
    <div>
        <h2>sync修饰符的使用</h2>
        <div>{{flag}}</div><Button @click="flag = !flag">点击</Button>
        <Child :flag.sync="flag"></Child>
    </div>
</template>
<script>
import Child from "./child";
export default {
    data(){
        return {
            flag: true,
        }
    },
    components:{
        Child,
    }
}
</script>

//子组件
<template>
    <article>
        <div>{{flag}}</div>
        <Button @click="$emit('update:flag',!flag)">点击</Button>
    </article>
</template>
<script>
export default {
    props:{
        flag: Boolean
    },
}
</script>

使用 sync 修饰符，有一个需要 注意 的地方：

带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。

将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

更多详细内容参考官网：点击跳转