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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值