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

【Vue】el-dialog的2种封装方法（父子组件双向通信），$emit触发父事件/.sync修饰符双向绑定

article 2025/3/14 4:42:48

🤵 作者：coderYYY
🧑 个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享🍀欢迎和我一起交流！🚀（评论和私信一般会回！！）
👉 个人专栏推荐：《前端项目教程以及代码》

前言

在现代Vue.js开发中，el-dialog组件作为ElementUI库中的一个重要组件，常用于实现弹窗功能。为了更好地满足业务需求和提高代码复用性，对el-dialog进行封装是一个不错的选择。
本文将介绍两种封装el-dialog的方法：一种是使用$emit触发父组件事件，另一种是使用.sync实现双向绑定。

✨一、使用$emit触发父组件事件

1. 封装Dialog组件

首先，我们需要创建一个Dialog.vue组件，并在其中使用el-dialog。为了能够让父组件控制弹窗的显示与隐藏，以及接收弹窗内的事件，我们可以在Dialog组件中通过$emit触发自定义事件。

<!-- Dialog.vue -->
<template>
 <el-dialog :title="title" :visible.sync="visible" width="30%" :before-close="handleClose">
     <p>这是弹窗的内容</p>

     <span slot="footer" class="dialog-footer">
         <el-button @click="handleCancel">取消</el-button>
         <el-button type="primary" @click="handleConfirm">确定</el-button>
     </span>
 </el-dialog>
</template>

<script>
export default {
     
 name: 'CustomDialog',
 props: {
     
     title: {
     
         type: String,