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

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

🤵 作者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,
         
http://www.dtcms.com/a/64506.html

相关文章:

  • go GRPC学习笔记
  • 《鸿蒙系统下AI模型训练加速:时间成本的深度剖析与优化策略》
  • 位运算性质
  • L3-1 夺宝大赛
  • 【RAG从入门到精通系列】【RAG From Scratch 系列教程5: Retrieval】
  • 动态规划-第2篇
  • Java volatile 关键字详解
  • 华为HCIE认证用处大吗?
  • Python 字节码深度历险:dis 模块揭秘与性能优化实战
  • 数智读书笔记系列016 从《理解和改变世界》探寻AI时代的知识与智能密码
  • 命令行重启Ubuntu软件
  • 云服务器安装宝塔面板部署
  • Mac安装Neo4j图数据库
  • 使用 UNIX 命令在设计中搜索标识符:vcsfind 的入门指南
  • A测题目名称: 双机串口通信系统
  • obsidian插件:Tasks Calendar Wrapper,更清晰的任务列表系统
  • unity webgl导出嵌套html以及导入django
  • 友思特新品 | OCT-3D断层扫描成像测量系统OQ StrataScope升级2.0型号!
  • 【开源项目-爬虫】Firecrawl
  • windows C++ 申请大量内存
  • Spring boot3-Http Interface: 声明式编程
  • 第十九:channel 的使用
  • Docker容器安装软件(完整版)
  • 阿里云短信发送(工厂模式实现)
  • C++:二分习题
  • never_give_up
  • 【C++ 系列文章 基础 01 -- std::string 与 fmt::format】
  • Java线程安全
  • Vue3 深度解析:构建现代Web应用的全新范式
  • 【PCIe 总线及设备入门学习专栏 3 -- PCIe 三种路由方式详细介绍】