VUE弹窗的两种实现方式--初级篇（vue实现弹窗功能）
ztj100 2025-02-04 17:13 24 浏览 0 评论
弹窗问题是前端开发在任何项目里面都会碰见的问题，今天主要是介绍在Vue框架里面如何手搓封装弹窗然后进行应用！
————————————
技术点：父子组件之间的通信交互。
方法一 使用v-model
父组件代码：
子组件代码：
官方文档里有写，一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。
model 选项可以用来避免这样的冲突，所以上面的子组件里，我们用balabala来替换掉了原本的input事件，所以在$emit的时候，里面的事件名应为balabala，否则默认为input.
————————————————
方法二 使用.sync修饰符
element就是使用的这种方式，实现方式如下：
父组件代码：
子组件代码：
子组件是通过执行一个父子通信的方法this.$emit("update:show",false); 可以直接将父组件传过来的show值改变，从而达到显示隐藏的目的。
以上就是两种弹窗的实现方法，比较的简单；希望对大家有所帮助！
相关推荐
- 前端案例·程序员的浪漫:流星雨背景
-
如果文章对你有收获，还请不要吝啬【点赞收藏评论】三连哦，你的鼓励将是我成长助力之一！谢谢！（1）方式1：简单版本【1】先看实现效果...
- UI样式iPod classic的HTML本地音乐播放器框架
-
PS：音量可以鼠标点击按住在音量图标边的轮盘上下拖拽滑动音量大小中心按钮可以更改播放器为白色...
- JavaScript 强制回流问题及优化方案
-
JavaScript代码在运行过程中可能会强制触发浏览器的回流（Reflow）...
- Ai 编辑器 Cursor 零基础教程:推箱子小游戏实战演练
-
最近Ai火的同时，Ai编辑器Cursor同样火了一把。今天我们就白漂一下Cursor，使用免费版本搞一个零基础教程...
- 19年前司机被沉尸水库!凶手落网，竟已是身家千万的大老板
-
]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...
- 全民健身网络热度调查“居家健身”成为第一网络热词
-
]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...
- 取代JavaScript库的10个现代Web API及详细实施代码
-
为什么浏览器内置的API你还在用某个臃肿的Javascript库呢？用内置的API有什么好处呢？Web平台经历了巨大演进，引入了强大的原生API，不再需要臃肿的JavaScript库。现代浏览器现已支...
- 前端文件下载的N种姿势:从简单到高级
-
文件下载是web开发里一个非常常见的功能，无论是下载用户生成的数据、图片、文档还是应用程序包。前端开发者有多种方式来实现这一需求，每种方式都有其适用场景和优缺点。介绍下几种比较常用的文件下载方法。...
- JavaScript 性能优化方法（js前端性能优化）
-
JavaScript性能优化方法减少DOM操作频繁的DOM操作会导致浏览器重绘和回流，影响性能。使用文档片段（DocumentFragment）或虚拟DOM技术减少直接操作。...
- DOM节点的创建、插入、删除、查找、替换
-
在前端开发中，js与html联系最紧密的莫过于对DOM的操作了，本文为大家分享一些DOM节点的基本操作。一、创建DOM节点使用的命令是varoDiv=document.createElement...
- 前端里的拖拖拽拽（拖拽式前端框架）
-
最近在项目中使用了react-dnd，一个基于HTML5的拖拽库，“拖拽能力”丰富了前端的交互方式，基于拖拽能力，会扩展各种各样的拖拽反馈效果，因此有必要学习了解，最好的学习方式就是实操！...
- 大模型实战:Flask+H5三件套实现大模型基础聊天界面
-
本文使用Flask和H5三件套（HTML+JS+CSS）实现大模型聊天应用的基本方式话不多说，先贴上实现效果：流式输出：思考输出：聊天界面模型设置：模型设置会话切换：前言大模型的聊天应用从功能...
- SSE前端（sse前端数据）
-
<!DOCTYPEhtml><htmllang="zh-CN"><head>...
- 课堂点名总尴尬?试试 DeepSeek，或能实现点名自由!(附教程)
-
2025年2月26日"你有没有经历过这样的场景？老师拿着花名册扫视全班：'今天我们来点名...'那一刻心跳加速，默念：'别点我！'但现在，我要...
- 我会在每个项目中复制这10个JS代码片段
-
你是否也有这种感觉：在搭建新项目时，你会想："这个函数我是不是已经写过了...在某个地方？"是的——我也是。所以在开发了数十个React、Node和全栈应用后，我不再重复造轮子。我创建...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)