(一)sync分析之为啥el-dialog中的visible需要使用.sync
2019-12-09 17:48
2281 查看
首先,笔者在使用element-ui 中的dialog组件时,发现visible属性在使用时需要添加.sync才生效,心中好奇,所以研究一下原理
我们先自己创建一个dialog组件,如下
当我们点击关闭按钮时,会发生警告
原因就是在VUE中,prop的传递是单向下行绑定的,也就是说只能父传给子,不能反过来。
虽然在demo中子组件直接修改visible也能够关闭窗口,但是该变量不能传给父组件,所以并不建议这么做,(如果您任性,觉得父组件拿到这个变量也没用,那您尽管在子组件中修改,但是小心父组件的入参变化时会覆盖你的修改)
现在思考,如果我们将子组件的变化告诉父组件,让父组件帮我们实现是否可行。也就是说我们操作子组件后通知父组件去关闭窗口,答案是可以的
在VUE中,子组件向父组件通信是通过事件完成的,this.$emit
我们点击子组件关闭按钮时,调用一下父组件的更新事件,让父组件在这个更新事件中改变visible这个变量,就可以实现子组件关闭了
.sync这个指令实际上是一个语法糖,在visible属性变化时会调用父组件的update:visible事件,我们将上面的demo修改如下
在使用该组件时,使用sync与法糖
该语法糖会扩展为
这样一来,visible就实现了父子同步,父组件初始化visible,子组件调用关闭事件,触发父组件update事件,父组件在update事件中更新visible变量,改变子组件可见的状态
我们在实现双向绑定时经常使用v-modal,这里看来,使用.sync也是可以的,不同在于v-modal触发的是父组件的input事件,.sync触发的是父组件的update事件
相关文章推荐
- 使用NOSQL的MongoDB时建立索引需要注意的几点建议和Explain优化分析
- 为何使用EL了表达式能够访问valueStack中对象的属性-源码分析
- pomelo sync在lordofpomleo的使用分析
- OpenCart为啥需要使用cURL扩展功能
- vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选,默认选中
- 分析oracle索引空间使用情况,以及索引是否需要重建
- 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了;面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为(转)
- vue+elementUI中使用 el-autocomplete 实现远程搜索的下拉框需要注意的问题
- 使用NOSQL的MongoDB时建立索引需要注意的几点建议和Explain优化分析
- 使用jquery easyui dialog 加载远程页面时,远程页面有CKEDITOR等需要调用JS,解决方案:
- 分析oracle索引空间使用情况,以及索引是否需要重建
- 自定义高斯模糊"Dialog",使用起来只需要new and show
- Dialog使用中需要注意的一些问题
- golang sync.Pool 使用和源码分析
- el-dialog 及其封装、使用
- 数据同步框架MS Sync Framework-不同场景使用例子和简要分析
- 需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
- 使用NOSQL的MongoDB建立索引时需要注意的几点建议和Explain优化分析
- 使用NOSQL的MongoDB时建立索引需要注意的几点建议和Explain优化分析 (转)
- 分析在Python中何种情况下需要使用断言