今天一直在纠结dialog中的sync有什么用？？

因为在官方文档的在线运行中，没有发现其他方法；

所以一度认定，sync就是起一个关闭弹层的作用；原本在子组件中使用el-dialog时，去掉sync修饰

的visible点击关闭按钮无法关闭弹窗，更让我确信就是这个用处

但是********************

加上sync后再次点击右上角的关闭按钮，此处报了个警告，有道翻译后是：

【避免直接改变道具，因为每当父组件重新呈现时，道具的值会被覆盖。相反，应根据道具的值使用数据或计算属性。道具被突变:“showDialog”】

/*弹窗子组件*/
<el-dialogtitle="提示":visible.sync="showDialog"width="35%">

/*父组件*/<add-dep :show-dialog.sync="showDialog"
:current-node="currentNode"
@addDepts="getDepartmentsList" />

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "showDialog"

found in

---> <AddDep> at src/views/departments/components/add-dep.vue

此处报错的原因在于，我的showDialog是从父组件中调用过来的，但是此时点击关闭按钮的时候:visible.sync修改了showDialog的值，与官网不同的地方在于，官网中的变量是声明在data中的；

翻看了这部分的源码后发现：

源码中在data中定义了一个closed属性来控制弹窗的开关，并且监听了一个变量visible用来控制是否展示弹窗，此处就与我们使用的el-dialog关联起来了

不难看出，

在mounted 中判断了visible是否为true，为true且构建dom后调用了open打开弹窗并判断是否要追加到页面结构中；

watch中根据visible的val来控制closed的值从而来改变弹窗是否打开，与此同时，监听了在 Dialog 出现时锁定body 滚动

点击关闭按钮调用的handleClose方法，此方法中调用的hide才是点击关闭按钮真正关闭弹窗的方法

//copy部分源代码做解释，想看完整的建议问度娘
<template><transitionname="dialog-fade"@after-enter="afterEnter"@after-leave="afterLeave"><div v-show="visible" class="el-dialog__wrapper" @click.self="handleWrapperClick"><divref="dialog"role="dialog"aria-modal="true":aria-label="title || 'dialog'"class="el-dialog":class="[{ 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]":style="style"><div class="el-dialog__header"><slot name="title"><span class="el-dialog__title">{{ title }}</span></slot><buttonv-if="showClose"type="button"class="el-dialog__headerbtn"aria-label="Close"@click="handleClose"><i class="el-dialog__close el-icon el-icon-close" /></button></div><div v-if="rendered" class="el-dialog__body"><slot /></div><div v-if="$slots.footer" class="el-dialog__footer"><slot name="footer" /></div></div></div></transition>
</template><script>data() {return {closed: false}},watch: {// 是否显示 Dialog，支持 .sync 修饰符visible(val) {if (val) {this.closed = falsethis.$emit('open')this.$el.addEventListener('scroll', this.updatePopper)this.$nextTick(() => {this.$refs.dialog.scrollTop = 0})if (this.appendToBody) {document.body.appendChild(this.$el)}} else {this.$el.removeEventListener('scroll', this.updatePopper)if (!this.closed) this.$emit('close')}}},mounted() {if (this.visible) {this.rendered = truethis.open()if (this.appendToBody) {document.body.appendChild(this.$el)}}},
methods: {// 关闭dialoghandleClose() {// 如果有beforeClose,执行beforeCloseif (typeof this.beforeClose === 'function') {this.beforeClose(this.hide)} else {// 否则隐藏this.hide()}},// 隐藏dialoghide(cancel) {if (cancel !== false) {this.$emit('update:visible', false)this.$emit('close')this.closed = true}}
}
</script>

结论：

将dialog直接使用时

<el-dialog>封装前（源码中）有一个visible属性来控制弹层是否显示，并且监听了弹层的值，sync是<el-dialog>里面定义的一个标识，用来双向绑定，修改了值就会触发源代码中的监听，从而运行$emit的逻辑

将dialog作为弹层子组件使用时，如果不对其进行一些设置，点击关闭后会以上警告且无法再次打开该弹窗。

可以去掉关闭按钮:show-close="false"和sync修饰符仅使用确认取消按钮中emit的方法来关闭弹层

<el-dialogtitle="提示":visible="showDialog"width="35%"@close="closeFn">
// 添加子部门async addDepartment() {try {await this.$refs.departForm.validate()// 新增部门await addDepartments({ ...this.departForm, pid: this.currentNode.id })// 修改视图this.$emit('addDepts')// 提示消息this.$message.success('成功添加子部门')// 关闭弹层this.$emit('update:showDialog', false)} catch (error) {console.log(error)}},closeFn() {// 重置数据  因为resetFields 只能重置 表单上的数据 非表单上的 比如 编辑中id 不能重置this.departForm= {name: '',code: '',manager: '',introduce: ''}this.$refs.departForm.resetFields() // 重置校验字段// 关闭弹层this.$emit('update:showDialog', false)}

element中el-dialog的:visible.sync理解相关推荐

Element Ui 中的 :visible.sync
若依后台管理[前端] 若依的前端基于饿了么(Element UI)进行开发,其中用到的组件也是非常之多的,如果没有仔细的看过和深入的了解Element UI 那么开发时就会相对的遇到一些问题(说的就是 ...
vue3中 :visible.sync 和slot报错
1. :visible.sync :visible指的是属性绑定,表示弹框的显示隐藏. 当:visible的值为ture的时候,弹框显示,当为false的时候,弹框隐藏 :visible.sync ...
封装Dialog子组件解决 visible.sync问题
子组件 1.visible.sync语法糖简单介绍 ** <child-dialog :visible.sync="visible"></child-dialog ...
【Vue.js】Vue.js组件库Element中的图片、回到顶部、无限滚动和抽屉
1.Image 图片图片容器,在保留原生img的特性下,支持懒加载,自定义占位.加载失败等. 基础用法可通过fit确定图片如何适应到容器框,同原生 object-fit. <div clas ...
Element-ui中关闭dialog时隐藏组件并销毁
背景:今天在写Vue时遇到一个element-ui中懒加载树的问题, 由于tree的展示是在模态框中, 所以默认显示模态框加载lazyLoad方法没问额!但是关闭后你再次打开模块框时不会再去执行laz ...
element ui里dialog关闭后清除验证条件
//vue<el-dialog title="编辑用户" :visible.sync="dialogFor ...
纯生js ajax,纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件
现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...
vue自定义插件封装一个类似 element 中 message 消息提示框的插件
vue自定义插件封装一个类似 element 中 message 消息提示框的插件一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
element中树形数据与懒加载实现全部展开和全部收起
element中属性懒加载数据 default-expand-all属性::是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效如果在表格头上加上一个按钮实现全部展开与收起类似如 ...

element中el-dialog的:visible.sync理解

结论：

将dialog直接使用时

将dialog作为弹层子组件使用时，如果不对其进行一些设置，点击关闭后会以上警告且无法再次打开该弹窗。

element中el-dialog的:visible.sync理解相关推荐

最新文章

热门文章