关于定义全局elementUi dialog对话框通过组件传值会影响单向数据流

最新推荐文章于 2023-04-20 23:12:10 发布
最新推荐文章于 2023-04-20 23:12:10 发布
阅读量429 收藏
点赞数
分类专栏： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Benz_s600/article/details/105864467
版权

前言：小编在编写过程中，利用elementui框架的dialog对话框做了一个弹框，
想在组件中引用，但是一关闭弹框的时候就报这个错
在这里插入图片描述
这个错是说不允许在子组件中修改值。
该如何解决呢？

1.我们首先定义了一个dialog组件
在这里插入图片描述
2.我们在组件中引用
在这里插入图片描述
3.子组件中
在这里插入图片描述
在这里插入图片描述
tips:一定要在关闭前的回调中将当前的状态传回去,由父组件修改当前状态值

4.父组件中，修改值。达到效果
在这里插入图片描述

恰好有你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React常见面试题目9w字|-7|虚拟dom,React diff 算法的原理，key,组件命名，全局的dialog,数据持久化，react和vue的区别，设计思路，
VAN
04-22 33
从本质上来说，Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对DOM的描述。
实现elementUI表单的全局验证的方法步骤
10-17
主要介绍了实现elementUI表单的全局验证的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue组件之单向数据流的解决方法
10-17
主要介绍了Vue组件之单向数据流的解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3中el-dialog组件传值
qq_17829205的博客
04-20 1260
我想用我经过这次的练习来去说，大白话就是说当你监听的值发生了变化了就可以执行某个函数了同理我们套用，对diglogshow进行watch发生变化后就会执行让diglogshow的值赋给isShow},})})
elementui全局封装Dialog对话框组件
IT_Dilraba_bin的博客
08-10 2566
elementui的dialog弹出框的全局封装，为了更快更加方便的使用elementui的dialog对话框，将对话框进行全局封装
element-ui修改dialog样式全局、局部修改问题 el-dialog__title/el-dialog__header/el-dialog__body/el-dialog__footer
关注我看更多东西
04-30 1万+
//没有scoped全局css全部文件生效但是其他地方用dialog样式也会生效 //有scoped为局部css --scoped只在本文件生效在这里设置el-dialog__header不生效 //因此通过el-dialog的class进行全局css中局部定义 只在当前文件生效 <template> <el-container><el-main> <el-button type="text" @click="centerDialogVisible ..
vue变量传值_vue组件之间相互传值的方式
weixin_39873208的博客
12-20 787
我们都知道 Vue 作为一个轻量级的前端框架，其核心就是组件化开发。Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在 vue 中组件之间的关系有：父子，兄弟，隔代。针对不同的关系，怎么实现数据传递，就是接下来要讲的。...
详解Vue组件之间的数据通信实例
08-30
对于父子组件，数据主要通过`props`单向流动，子组件通过触发事件通知父组件更新数据。对于非父子组件，可以通过事件总线实现跨组件通信。理解并熟练掌握这些通信方式，能帮助开发者更好地构建复杂的应用。
vue弹窗调用另一个弹窗_使用Vue组件实现一个简单弹窗效果
weixin_31597865的博客
01-12 1585
最近在使用element-ui框架，用到了Dialog对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家分享一下，下面本文会带着大家手摸手实现一个弹窗组件。本文主要内容会涉及到弹窗遮罩的实现， slot 插槽的使用方式， props 、 $emit 传参，具体组件代码也传上去了。如果喜欢的话可以点波赞/关注，支持一下，希望大家...
包含一些常用的Vue组件如富文本编辑器Dialog等
08-10
我们还需要注意Prop的单向数据流原则，以避免子组件意外修改父组件的状态。 状态管理工具Vuex也是Vue开发中常用的一个部分，尤其是在组件间需要共享复杂状态时。例如，我们可以在Vuex中维护一个全局的`Dialog`状态...
element ui dialog 父子组件传值
热门推荐
Daisy
12-18 2万+
最近在做课设的时候 用到了Elementui 中的dialog的组件，但在将dialog作为一个子组件的时候，传值出现了问题。当关闭dialog的时候应该怎么传值?   一开始的时候的想法比较简单，就是父组件直接传值来作为子组件的show/hidden的值。 然而这样的问题是当子组件close的时候，他会直接直接改变他的值，但是子组件不能直接改变props的值，因此可以通过子组件触发事件给父...
关于elemen 的dialog一些全局定义方法
qq_30241143的博客
04-06 382
ElementUI.Dialog.props.closeOnClickModal.default = false // dialog 遮罩不关闭 ElementUI.Dialog.props.closeOnPressEscape.default = false // dialog esc不关闭 ElementUI.Dialog.props.showClose.default = false // 全局去除dialog 关闭按钮 在main.js里添加即可，其他的类似功能也可以在全局定义 添加方法为 Elem
ElementUI form 在dialog中无法正确重置的解决方案
哈
11-10 1241
##　问题描述 在用ElementUI做动态表单（比如修改，先将查询出来的数据显示到页面上，然后再重置/修改）时，如果数据的修改是在打开dialog（子组件）中进行操作的，但是在修改数据时，正常来说可以直接调用 this.$refs[str].resetFields() 直接清空，但是这里会出现问题: 原因： form表单的重置是以第一次打开的数据作为重置标准，如果先打开的是更新，那么重置之后以第一次更新的数据作为标准 Dialog 中的内容是懒加载的，目前 edit (更新)方法的写法导致 Form 刚
Vue+element实现组件（表格）之间的传值（路由方式）
qq_32339477的博客
12-16 1万+
初次接触vue项目，关于vue组件之间传值的方式： 1、通过vue的store仓库（大项目适用） 2、props（父子组件） 3、路由传值（最简单的方式） 我们先讲第三个： 这是我的从后台接受到的数据渲染到表格的数据： &lt;el-table style="width: 90%" class="psHeight" @selection...
vue + element-ui（el-upload）（多个el-upload组件 通过接口循环出来的）+ 阿里云 ali-oss 上传文件
c327127960的博客
12-28 2362
最近有个需求 需要上传文件至 ali-oss 并且是多个el-upload 组件 通过接口循环出来的 并在点击提交按钮的同时将所有上传的文件统一上传至阿里云 效果展示 项目的框架是vue 选择的方案是 element-ui（el-upload）也就是饿了么ui框架里的 upload组件 就按照官方文档一步步来 安装ali-oss npm install ali-oss 引入 ali-oss import OSS from "ali-oss"; 初始化 OSS 对象 stsToken 此属性我没
el-dialog传值（element ui dialog 父子组件传值）
南北极之间
03-23 3340
https://element.eleme.cn/#/zh-CN/component/dialog 1，可以使用： 在el-dialog设置:befor-close （组件关闭之前调用父组件的函数来关闭弹框） https://blog.csdn.net/qq_43227958/article/details/90720730 2，使用@close方法：结合emit https://blog.csdn.net/qq_37021554/article/details/8508178...
通过Dialog进行页面传值
GrowingSir
06-14 9966
Dialog传值 在这里就不罗嗦啦，直接码js部分的Dialog代码 //方法一（现在我用的比较少） function bidDetail(id){ var diag = new Dialog({ title : "详细信息", url : "bidDetail.zhtml?ID="+id, ...
vue + elementui 中的弹窗组件封装成公共组件
weixin_30781107的博客
06-05 3948
如果一个弹窗比较简单，可以直接放在页面中，通过visible属性的true，false控制显示隐藏就可以了，我们今天要说的是将个比较复杂的弹窗组件封装成全局组件，然后可以在项目中的任何一个页面引用~~下面走起 1.首先要注册个全局组件，用下面的全局APIVue.component('my-component', { /* ... */ }) 在js文件中首先引入这个弹窗组件，...
elementui删除对话框
最新发布
09-22
ElementUI的删除对话框可以通过以下步骤实现： 1. 首先，在你的Vue组件中，创建一个对话框组件并在其上使用v-model绑定一个布尔类型的数据，用于控制对话框的显示和隐藏状态。 2. 在对话框组件中，使用ElementUI的Dialog组件来渲染对话框的外观和布局。 3. 在对话框中，使用ElementUI的Button组件来渲染一个“删除”按钮。 4. 给“删除”按钮添加一个点击事件处理函数，该函数将会在用户点击按钮时执行删除操作。 5. 在点击事件处理函数中，触发删除操作，比如向后端发送一个请求以删除相应的数据。 6. 在删除成功后，根据业务需求，可以选择刷新页面或更新数据列表等操作。 以下是一个示例代码，演示了如何使用ElementUI实现一个删除对话框： ``` <template> <div> <el-button type="danger" @click="showDeleteDialog = true">删除</el-button> <el-dialog title="确认删除" :visible.sync="showDeleteDialog" :close-on-click-modal="false" > <p>确定要删除吗？</p> <span slot="footer" class="dialog-footer"> <el-button @click="showDeleteDialog = false">取消</el-button> <el-button type="primary" @click="deleteItem">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { showDeleteDialog: false, }; }, methods: { deleteItem() { // 发送删除请求的逻辑 // ... // 删除成功后的操作 // ... }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值