当前位置：首页 > news >正文

【vue3封装element-plus的反馈组件el-drawer、el-dialog】

news 来源：原创 2025/5/6 9:22:17

vue2中封装el-drawer、el-dialog这类反馈类子组件，需要将父组件的visible值传递子组件，并且再通过$emit将关闭弹窗的组件值传回父组件，同事子组件还需要监听父组件传递过来的visible的值，来驱动弹窗显示隐藏，很麻烦，代码也比较臃肿，vue3中实现方案更加简洁、方便，本文主要示例讲解vue3封装element-plus的对话框、抽屉的实现方案，同时会将vue2的实现示例写出，来进行对比，这两个组件实现方案基本一致，顾放在一起说明

文章目录

vue2封装示例
- - el-dialog组件封装
  - el-drawer组件封装
vue3封装示例
- - - 子组件封装示例：
    - 父组件调用：
结尾说明

vue2封装示例

el-drawer、el-dialog作为子组件的封装基本一致，将二者示例同时展示，主要是方便以后复制粘贴

el-dialog组件封装

父组件调用文件：

<template><div ><childDlg @updateVisible="updateVisible" 	:visible="changeVisible" /></div>
</template><script>
import childDlg from './childDlg .vue'
export default {components:{childDlg },data(){return {changeVisible:false//弹窗控制}},methods:{// 接收弹窗关闭updateVisible(val) {this.changeVisible= val}}</script>

子组件childDlg .vue弹窗封装文件

<template><div><el-dialog title="修改信息":visible.sync="checkDialog":before-close="closeReset":close-on-click-modal="false">弹窗展示</el-dialog></div>
</template><script>export default {props: {visible: {type: Boolean,default: false,}},computed: {checkDialog: {get() {return this.visible},set(val) {// 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 changeVisible的值this.$emit('updateVisible', val)},},},  watch:{visible(newVal){//可以执行异步if(newVal){this.openDialog()}}},methods:{openDialog(){//打开弹窗事件},closeReset(done) {//弹窗关闭this.checkDialog = false},}}
</script><style lang="scss" scoped></style>

el-drawer组件封装

父组件调用文件：

<template><div ><childDrawer  @updateVisible="updateVisible" 	:visible="changeVisible" /></div>
</template><script>
import childDrawerfrom './childDrawer.vue'
export default {components:{childDrawer},data(){return {changeVisible:false//抽屉控制}},methods:{// 接收抽屉关闭updateVisible(val) {this.changeVisible= val}}</script> ```子组件childDrawer.vue弹窗封装文件```javascript
<template><div><el-drawertitle="修改信息":visible.sync="checkDialog":before-close="closeReset">抽屉展示</el-dialog></div>
</template><script>export default {props: {visible: {type: Boolean,default: false,}},computed: {checkDialog: {get() {return this.visible},set(val) {// 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 changeVisible的值this.$emit('updateVisible', val)},},},  watch:{visible(newVal){//可以执行异步if(newVal){this.openDialog()}}},methods:{openDialog(){//打开抽屉事件},closeReset(done) {//弹窗关闭this.checkDialog = false},}}
</script><style lang="scss" scoped></style>

vue3封装示例

这里主要以el-drawer为例说明，el-dialog组件会将代码块粘贴，二者使用上是完全一致的，当然vue3与vue2封装上的主要区别，在于vue3使用的< script setup >方式声明为了保证文件独立性，将组件进行了全封闭，换句话说，控制子组件的弹窗、抽屉的属性值需要在子组件内，而不是像vue2封装一样在父组件中，通过父组件值的true或者false来控制弹窗显示隐藏，那如此要解决的最主要的问题就是如何“点击父组件的按钮让子组件弹出来”

这里会用到新属性：defineExpose()方法，官方描述：使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性
示例：

<script setup>
import { ref } from 'vue'const a = 1
const b = ref(2)defineExpose({a,b
})
</script>

当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)
文档地址：vue3–defineExpose()

子组件封装示例：

说明：在子组件中声明关闭与打开方法：open()与close()用于修改控制抽屉开关的值drawer，以方便父组件调取

drawerChild.vue文件

<template><el-drawer v-model="drawer"title="抽屉标题"><span>抽屉内容</span></el-drawer>
</template><script setup>
const drawer = ref(false)
function open() {drawer.value = true
}
function close() {drawer.value = false
}
defineExpose({open,close,
})
</script><style lang="scss" scoped>
</style>

父组件调用：

<!-- 抽屉 --><el-button @click="openDrawer">打开抽屉</el-button><drawer-child ref="drawerChildRef" />

<script setup>
import drawerChildfrom './drawerChild.vue'const drawerChildRef= ref(null) //抽屉reffunction openDrawer() {drawerChildRef.value.open()
}

除此之外，相关的父子组件传值还是可以继续使用Props、emit来实现的
difineProps：子组件接收父组件传过来的值。
difineEmits: 子组件接收父组件传过来的方法。
这里不做过多演示

结尾说明

从代码简洁度，逻辑条理性上无疑vue3相对于vue2都是更胜一筹的，vue3本身还有很多非常优秀的api创新，建议多阅读官方文档：vue3官方文档
接下来把el-dialog封装也贴一下，方便日后复制粘贴

<template><el-dialog v-model="dialogVisible"title="弹窗标题"><span>弹窗内容</span><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary"@click="dialogVisible = false">确定</el-button></div></template></el-dialog>
</template><script setup>
const dialogVisible = ref(false)
function open() {dialogVisible.value = true
}
function close() {dialogVisible.value = false
}
defineExpose({open,close,
})
</script><style lang="scss" scoped>
</style>