多个v-model?.sync的用途

总所周知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了。