vue 子组件改变父组件的值 ( el-dialog封装控制显示隐藏)

最新推荐文章于 2025-05-13 18:53:23 发布

原创最新推荐文章于 2025-05-13 18:53:23 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

157 篇文章

订阅专栏

本文介绍了一个Vue应用中，如何通过props和$emit实现父组件与子组件之间的数据传递与状态同步。具体展示了子组件如何使用$emit触发父组件的方法，以及父组件如何监听子组件的事件并更新状态。

父组件

<componentTree v-show="panelShow" :panelShow="panelShow" @add-comment="getDate" @setValue="setValue"></componentTree>
setValue(res) {
  this.panelShow = res
},

子组件
props:{
  panelShow: {
    type: Boolean
  }
},
// 改变父组件的值
this.$emit('setValue',false); // 关闭弹框的传值
this.$emit('add-comment')

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sunlizhen

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Vue笔记】基于vue3 + element-plus + el-dialog封装一个自定义的dialog弹出窗口组件

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过优快云记录学习心得和笔记内容。

11-19

1873

v-model模式下，默认的属性名称是【modelValue】，可以省略不写，这种方式下，只需要在使用组件的时候，直接写【v-model】就可以实现数据的双向绑定。如果你想自定义属性名称，那么你就必须使用【v-model:属性名称】的格式来进行数据的双向绑定，这种模式下，必须指定属性名称，要和子组件中的props属性名称相同，另外emits发送事件的时候，也要使用【emits("update:属性名称")】这种格式，这样才可以完成数据的双向绑定。

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

coderYYY的博客

03-12

833

对el-dialog进行封装是一个不错的选择。本文将介绍两种封装el-dialog的方法：一种是使用$emit触发父组件事件，另一种是使用.sync实现双向绑定。本文介绍了两种封装el-dialog组件的方法：一种是使用$emit触发父组件事件，另一种是使用.sync实现双向绑定。这两种方法各有优缺点，开发者可以根据具体需求选择适合的方法。

参与评论您还未登录，请先登录后发表或查看评论

VUE调用子页面弹窗或组件弹窗，关闭弹窗刷新父级页面主页面，通过this.$emit来实现

Java&Develop的博客

02-25

2551

VUE调用子页面弹窗或组件弹窗，关闭弹窗刷新父级页面主页面，通过this.$emit来实现

vue中父组件控制子组件的显示隐藏

m0_63466615的博客

07-29

5193

vue中父组件控制子组件的显示隐藏

vue 子组件调用($emit)父组件方法后父组件方法如何回调子组件方法

Q1761991696的专栏

09-03

9613

一、子组件调用父组件方法: 1.子组件方法: …… methods:{ ShowMore(step){ this.$emit("ChildClick",step);//第一个参数为父组件中调用子组件时@ShowMore方法名,必须保持一致；第二个为参数; } } …… 2.父组件方法: …… methods：{ ShowMore(step){ let result...

对话框-封装组件的步骤

weixin_44867717的博客

04-22

278

对话框-封装组件的步骤效果图第一步：在同层级或components文件夹下新建组件文件deployment.vue <template> <div class="container"> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" > <span

Vue 父子组件的数据传递、修改和更新方法

11-29

父子组件之间的数据关系，我这边将情况具体分成下面4种： 父组件修改子组件的data，并实时更新 子组件通过$emit传递子组件的数据，this.$data指当前组件的data(return{…})里的所有数据， this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据，通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { console.log(data); data.background = { backgro

记录-vue3调用el-dialog封装子组件

qq_45346362的博客

06-27

1038

写过几次了，每次方式还不一样，之前用computed包裹prop可以，现在又不行了，所以记录下，以便日后查询。

#11vue3中使用el-dialog展示与关闭交由父组件控制的写法

weixin_42718399的博客

02-18

2250

vue3中使用elementplus的el-dialog展示与关闭交由父组件控制的写法，分两种方法，使用difineExpose或者defineEmits实现

二次封装 el-dialog 组件：打造更灵活的对话框解决方案

最新发布

专研技术的大学生:会点Java和前端

05-13

1097

在 Vue 项目中，Element UI 的 `el-dialog` 是一个非常实用的对话框组件。但在实际开发中，我们经常会遇到需要重复设置对话框属性、处理相同逻辑的情况。通过二次封装，我们可以创建一个更灵活、更易用的对话框组件，提高开发效率并保持代码一致性。

el-dialog作为子组件如何由父组件控制显示/隐藏

Prelude4的博客

03-28

3109

注意看调试窗口里面：当visible的值发生变化的时候，没有调用watch的函数，而是调用mounted函数。然后看了另外的文章，发现子组件不能直接更改props里面的数据，也不能直接进行v-model绑定。个人经验，如有错漏，欢迎指出。

boke | vue中实现在子组件中刷新父组件列表

Linda的前端开发路

07-27

9268

vue中实现在子组件中刷新父组件列表

vue修改子组件的样式如 el-dialog

@you的博客

04-21

2420

一般vue组件会有自己的样式，在style中加了scoped 代表私有 <style lang="scss" scoped> ... </style> 去掉scope虽然可以修改样式，但是是修改的是全局的，其他组件再引用就会别污染修改子组件样式需要在父组件加 /deep/ 或者::v-deep 才能修改 //建议使用/deep/,::v-deep有些不识别 .icon-dialog { ::v-deep .el-dialog { border-radiu...

vue+elementUI中Dialog实现组件弹框以及子父组件页面传值

周金鱼啊

03-26

3万+

弹框使用element-UI中的Dialog 对话框 + vue组件结合实现~~~·~ 定义html <div @click="MyAnalyze()">我的区划</div> <el-dialog title="" :visible.sync="dialogBiomeVisible"> <NationalBiome :closeV...

Vue子组件的显示与隐藏

vue 子组件改变父组件的值 ( el-dialog封装 控制显示隐藏)

vue 子组件改变父组件的值 ( el-dialog封装控制显示隐藏)