代码
//父组件 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 会自动进行以下操作:
- 绑定 prop:默认绑定名为
modelValue
的 prop,即父组件传递给子组件的值通过props.modelValue
接收。 - 绑定事件:默认监听名为
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>