VUE3的父子数据交互

VUE3 支持多个V-model的形式绑定
这里展示代码和需要说明的地方：

父组件

<LoginDialog v-model:dialogVisible="isDialogVisible" />

注意的地方：v-model:dialogVisible="isDialogVisible"
其实就可以简单的理解为：key->value

dialogVisible，这个就是自定义命名的key
isDialogVisible，这个就是一个变量value

子组件

<template>
    <el-dialog v-model="localDialogVisible">
        123456
    </el-dialog>
</template>

<script>
export default {
    props: {
        dialogVisible: Boolean
    },
    computed: {
        localDialogVisible: {
            get() {
                return this.dialogVisible;
            },
            set(value) {
                this.$emit('update:dialogVisible', value);
            }
        }
    }
};
</script>

props：就是承接父组件过来的数据，既然数据过来了，为什么不直接使用v-model="dialogVisible"? 岂不是更加简单
因为规定props是单项传递，只能接受不能修改，所以这里使用另外一个变量来保存并修改，这里我们使用了 localDialogVisible。

this.$emit('update:dialogVisible', value); 这一段就是将修改后的数据传递回父组件