modal组件的.sync修饰符

最新推荐文章于 2024-12-26 13:11:35 发布
最新推荐文章于 2024-12-26 13:11:35 发布
阅读量449 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： ElementUI相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38735931/article/details/106253017
本文深入探讨了Vue.js中.sync修饰符的作用及其实现原理，解释了为何在自定义组件中直接使用该修饰符会导致错误，并提供了正确的使用方式。通过本文，读者将了解到如何优雅地在子组件中修改父组件的状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

之前工作中在自定义组件时有用到modal组件，官方文档里都会在modal里写

<fui-modal
	:visible.sync="visible"
	on-close="close"
>

.sync修饰符：当值更新时，会显示触发更新事件
而子组件接受父组件传值时，不能对其直接进行改变
因此，自定义组件里要把这个修饰符去掉，不然关闭modal时会报错
理解有误
该修饰符可以使得子组件优雅的修改父组件的数据
由于vue不能在子组件直接修改props传过来的简单类型的值
经常用触发事件的方式修改父组件的值如emit

Vue.js前端框架教程16：Element UI的el-dialog组件
Cachel Wood的博客
01-11 670
点击按钮可以打开对话框，对话框标题为 “示例对话框”，宽度为页面宽度的 30%，内容为 “这是一个简单的示例对话框”。: 在对话框关闭前调用的函数，参数为关闭前的回调函数，可用于阻止对话框关闭。: 布尔值，设置点击对话框背景时是否关闭对话框。: 布尔值，设置关闭对话框时是否销毁对话框内容。: 布尔值，设置是否在对话框显示时才渲染内容。: 布尔值，设置对话框打开时是否聚焦到对话框。通常用于嵌套对话框时避免样式冲突。: 布尔值，设置点击遮罩层时是否关闭对话框。: 布尔值，设置是否在对话框显示时锁定滚动。
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
12-12
需求：点击btn,弹出modal显示图表（以折现图为例） 这应该是很基本的需求也是很容易实现的，代码和效果如下： 代码解释：setTem是一个方法，改变modal为true，默认为false ； chart-line是图表子组件，通过data向其传递参数，data绑定的数据是父组件mounted后拿到的数据 效果图：点击btn后的确显示了modal框，但是里面的图表不能显示，接着改变子组件任何代码，迫使重新编译子组件，则子组件的图表可以正常显示 分析：当点击btn时，modal框的确弹出来了，但推测其底层是使用v-show来实现显示与否，所以改变modal为true或fasle只是改变了
vue v-model与.sync详解
暴走的山交君的博客
12-05 450
用过vue的小伙伴应该都知道，使用表单绑定值的时候，我们通常会用到一个 v-model 指令，它可以在表单以及元素上面创建双向数据绑定 1、但是其实 v-model 是一个语法糖，它真的是实现是这样的： 2、相信用 v-mode 绑定绑定表单，大家都非常熟悉，但是 v-model 还有一个作用，可以用于父子组件之间数据的双向绑定。 成功修改value的值3、.sync修饰符作用.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。 不使用.sy
原生js实现列表渲染及列表单选
weixin_30493321的博客
09-24 1129
css部分： .picker_header{ display: flex;} /*卡列表绑定*/ .option-picker .option-picker-cell.option:after {content: " ";position: absolute;bottom: 0;left: 1rem; right: 1rem;border-bottom: 1px...
Vue中从v-model，model，.sync到双向数据传递，再到双向数据绑定
爪哇犀牛
09-14 1万+
前面的话 虽然v-model和.sync之间的区别，是非常明显的，但是通过这个去研究下去，就有点意思了。首先说明v-model是.sync的一种特殊情况，也就是当prop是value，vm.$emit('update:input')，这个时候就是传统意义上的v-model，也就是说v-model是model为prop等于value，event为input的特殊情况。 概念 双向数据传递 为...
Vue2中公共组件模态框（modal）
男孩依旧
11-12 1万+
modal组件 在开发基于Vue2框架的项目时，项目需求一款模态框组件，因为没用使用UI框架，所以打算自己开发，在查询资料后，成功写出高度可定制化的modal组件，看具体代码 HTML部分 使用slot插槽进行内容替换 &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;transition name=&amp;amp;quot;modal&amp;amp;quot; tag=&amp;amp;quot;d
【Vue】v-model和.sync
qq_40205510的博客
04-15 1430
Vue中的v-model和.sync修饰符都是用于实现父子组件间数据双向绑定的机制。尽管它们的作用相似，但在使用方式和实现细节上有所区别。
vue子传父关于.sync与$emit的实现
01-19
一：什么地方需要用到.sync修饰符呢 当子传父，父级有两数据，而没有v-modal时 例如iview的Tree组件中： 父级： <folder-tree :folder-list.sync=folderList :file-list.sync=fileList :folder-drop=...
<el-dialog ref="hussar_40Ref" @opened="hussar_40OpenedDialog" :visible.sync="hussar_40Show" :show-close="hussar_40ShowClose" :modal="hussar_40IsModal" :modal-append-to-body=true :append-to-body=true :close-on-click-modal="hussar_40IsClickClose" top="0" :class="{'BbcxSjccb_hussar_40': true, 'lcdp_axe':true, 'jxd_additional': true, 'BbcxSjccb': true}" class="hussar_40 jxd_ins_elDialog default">
07-20
- :visible.sync: "hussar_40Show"，控制el-dialog的可见性，使用.sync修饰符可以实现双向绑定。 - :show-close: "hussar_40ShowClose"，控制是否显示关闭按钮。 - :modal: "hussar_40IsModal"，控制是否启用模态框...
Vue.js组件开发-v-model如何实现数据双向绑定
最新发布
LCG元的博客
12-26 782
在Vue.js组件开发中，实现v-model双向数据绑，v-model是Vue提供的一个指令，用于在表单输入元素（如、等）和组件上创建双向数据绑定。对于自定义组件，可以通过特定的方式来实现v-model的功能。在Vue 2.x中，需要利用value属性（或其他选择的prop名）来接收父组件传递的数据，并通过input事件来通知父组件数据的变更。Vue 2.2.0+版本还允许通过model选项来自定义用于双向绑定的prop和事件。
vue .sync修饰符的实例
秋刀鱼笛滋味
01-31 1502
.sync的作用是：让子组件优雅的修改父组件的data 实例：弹窗的开关 父组件传递一个布尔值show决定组建的开关 &amp;lt;product-list @add='add' :show.sync='showModal' :checked='tableData2' /&amp;gt; showModal为弹窗的开关， 在子组件出发关闭的方法 this.$emit('update:show', false)...
vuejs使用Element-ui封装dialog公用数据列表弹出插件
李欢欢的博客
04-04 1万+
vuejs使用Element-ui封装dialog公用数据列表弹出插件 dialog代码 &amp;lt;template&amp;gt; &amp;lt;el-dialog :title=&quot;modalObj.title&quot; :visible.sync=&quot;modalShow&quot; width=&quot;60%&quot; center :before-close=&q
VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题
tangdou369098655的博客
05-14 1万+
VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题 这篇文档存成草稿2年了，最近终于有时间拉出来写完了。。。。 我们日常开发中经常遇到:visible.sync修饰符，特别是当你使用elementUI的时候，el-dialog组件如果不使用:visible.sync就会出现一些意想不到的问题，比如说疯狂报错给你看~~~ 场景： 父组件引用子组件 <child-dialog :visible="visible"><
vue + ts 项目中ModelSync的用法
zxl1990_ok的博客
02-01 1860
要使vue支持ts写法，我们需要用到vue-property-decorator，这个组件完全依赖于vue-class-componet 首先安装： npm i -D vue-property-decorator @ModelSync(propName: string, event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) @ModelSync装饰器可接受三个参数: propName: string.
修饰符.sync的用法
qq_45593068的博客
04-29 1万+
修饰符.sync的用法 单个props数据绑定用法 对象型props数据绑定用法 在vue.2.3.0从vue 1.0.0里面重新拿会修饰符.sync 很明显它的意思就是说.sync修饰符可以像v-model一样实现类似双向绑定的场景用法。 还有一点需要注意 这几行的大概意思就是要求我们用$emit('update:xx', 参数)的形式传参，因为如果不用这种方法子组件内的props参数将无...
记一个Vue官方文档中关于修饰符.sync的坑
sevenddddddd的博客
04-20 4885
Vue官方文档“组件”一栏中提到，Vue在2.0移除了.sync，又在2.3重新添加了它，但是采用了全新的内部逻辑：这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。只有在子组件中显式传递一个名为update:变量名的自定义事件，父组件的相应变量才会被更新。下面是坑：Vue官方文档中对于最新版的.sync修饰符的原理解释如下： 如下代码 <com
vue控制组件显示和隐藏 v-if 与 :visible.sync
热门推荐
Future1994的博客
07-17 2万+
父组件中 子组件中：
modal--7.修改、增加(同步+异步)
村西头的俏寡妇
10-07 1848
1      按钮   <button onclick="update(${items.id },'${items.value }')" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-defaultbtn-xs update"> 编辑 <a href="javascri
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值