vue3封装弹窗组件实现父子双向绑定

---

title: vue3封装弹窗组件实现父子双向绑定
date: 2024-06-12 11:27:50
Tags: vue3

简单需求描述

需要封装一个弹窗组件，让其他组件可以调用他并且可以通过其他组件来控制组件的开关。

那么这个时候我们就要使弹窗组件和其他组件实现双向v-model绑定来控制相关数据，让他能够被其他组件打开。

使用的方法

我查看了很多的博客和网页，但是我总觉的他们实现的方法不够优雅，还有直接使用v-if来控制组件开关的，虽然没什么问题完成了需求，但是我不太能够接受这种用法。

官网挂的有两种方法，我相中了defineModel( ),但是需要vue3.4以上的版本，之前的版本还不能使用这个方法。笔者就是使用的是之前的版本，笔者更改成本有点大，怕影响其他程序，所以不得不看向另外一种老版本使用方法，但是我看着这种使用方法很不顺眼，也不想使用这种方法。

最后决定使用计算属性computed来辅助相关的功能的完成。

官网绑定方法

defineModel( )

孩子组件：

<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script><template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>

defineEmits()+defineProps()

孩子组件：

<script setup>
defineProps({firstName: String,lastName: String
})defineEmits(['update:firstName', 'update:lastName'])
</script><template><inputtype="text":value="firstName"@input="$emit('update:firstName', $event.target.value)"/><inputtype="text":value="lastName"@input="$emit('update:lastName', $event.target.value)"/>
</template>

父亲组件：

<UserNamev-model:first-name="first"v-model:last-name="last"
/>

计算属性绑定方法

这个方法的逻辑关系更加清晰，但是这也仅仅是对官方法进行了改写，所以多看官方文档。以下注释应该能看明白代码。

弹窗对话子组件：

<template><el-dialogv-model="visible"title="儿子标题"width="750":close-on-click-modal="false"@close="cancel"@closed="closed"draggable><template #footer><div class="dialog-footer"><el-button type="primary" @click="confirm"> 确定 </el-button><el-button @click="cancel">取消</el-button></div></template></el-dialog>
</template><script setup>
const visible = computed({// 只读，计算相关的属性变化，变化的时候再更新get() {return props.open;},// 修改，在变化后还修改传给父亲属性的传值达到双向绑定目的set(val) {emit("update:open", val);},
});// 传递属性给父组件
const props = defineProps({open: Boolean,
});//传递更新方法给父组件
const emit = defineEmits(["update:open"]);// 立即关闭弹窗（x）
const cancel = () => {visible.value = false;
};// 关闭弹窗并通知父组件（取消按钮）
const closed = () => {emit("update:open", false);
};// 确认 上传的数据图片内容被选择成功
const confirm = () => {emit("update:open", false);
};
</script>

调用：

 <selectPictureDialog v-model:open="pictureDialog" title="父亲标题" />