总所周知vue2一个组件上只能有一个v-model(vue3可以多个,按下不表)。那么当我们需要多个双向绑定的prop时咋办
.sync就给了这个操作空间,简单示例
// 父组件
<ChildModal :visible.sync="visible">
//子组件<template> <elDialog title="Dialog" :visible="propsVisible" @close="$emit('update:visible', !visible)" > </elDialog></template><script>export default { name: 'ChildModal', props: { visible: { type: Boolean, default: false } }}</script>
上面代码就可以完成一个简单的弹窗开关。而不需要因为改不了prop而去里外设置参数中转。
其中!!
// 父组件
<ChildModal :visible.sync="visible">
//等同于
<ChildModal :visible="visible" @update:visible="val => visible = val">
欧了。
另外vue3中 可直接v-model:visible,就无需sync了。