Vue3 父子组件通信实战：用 Props + emit 实现可复用对话框组件

代码

//父组件 Parent.vue
<template>
<div>
    //1、使用子组件，并将父组件的值editVisible传入子组件，数据流向：父->子
    <Edit v-model="editVisible" />
</div>
</template>

<script setup>
    //此处我没加按钮了，因为代码太多不便于读者理解，因此我直接初始化为true
    const editVisible = ref(true)
</script>







//子组件 Edit.vue
<template>
    <div>
         
        <el-dialog  v-model= "dialogVisible"  title="Warning" width="500" center  @close="handleClose">
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                Confirm
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>


<script setup>

//2、通过 props 声明，清晰描述子组件需要的数据类型和格式，在 Vue 中，v-model 的动态绑定机制默认使用名为 modelValue 的 prop 来接收父组件的值，并通过触发 update:modelValue 事件来更新父组件的值。这是 Vue 内置的默认约定，适用于大多数表单元素（如 input、select、textarea）和组件。因此这里我需要的的是Boolean类型的modelValue。

const props = defineProps({
    modelValue: Boolean,

});


const emit = defineEmits(['update:modelValue']);


//3、由于v-model不能直接接收props传来的动态数据，因此用dialogVisible来间接接收，此处get为获得父组件传来的数据，此时父->子数据传输完毕，由于v-model="dialogVisible"，此时为true，对话框显示出来

//5、当dialogVisible发生改变时（此处true→false），自动执行set将变化后的值传给父组件的editVisible，此时实现子->父数据传输

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});


//4、当关闭、取消或提交时，修改dialogVisible的值为false，此时对话框关闭
function handleClose() {
  dialogVisible.value = false;
}
</script>

注意我代码中注释的序号顺序，这样方便理解整个代码的数据流向。

对于v-model动态绑定默认使用名不太理解的看这里（下面的代码不太完整，只是为了方便理解，对父组件进行拆解）。当在组件上使用 v-model 时，Vue 会自动进行以下操作：

1. 绑定 prop：默认绑定名为 modelValue 的 prop，即父组件传递给子组件的值通过 props.modelValue 接收。
2. 绑定事件：默认监听名为 update:modelValue 的事件，当子组件需要更新父组件的值时，触发该事件并传递新值。

<!-- 父组件 -->
<ChildComponent v-model="editVisible" />

<!-- 等价于 -->
<ChildComponent 
  :modelValue="editVisible" 
  @update:modelValue="parentValue = $event"/>





<!-- 子组件 -->
<script setup>
const props = defineProps(['modelValue']); // 接收 modelValue prop
const emit = defineEmits(['update:modelValue']); // 定义更新事件

// 子组件更新值时
emit('update:modelValue', newVal); // 触发事件，父组件的值会同步更新
</script>