element ui dialog 父子组件传值
2018-12-18 22:46
2266 查看
最近在做课设的时候 用到了Elementui 中的dialog的组件,但在将dialog作为一个子组件的时候,传值出现了问题。当关闭dialog的时候应该怎么传值?
一开始的时候的想法比较简单,就是父组件直接传值来作为子组件的show/hidden的值。
然而这样的问题是当子组件close的时候,他会直接直接改变他的值,但是子组件不能直接改变props的值,因此可以通过子组件触发事件给父组件。
子组件在关闭时候的事件,通过阅读官方文档,我们发现他提供了一个关闭的时候的回调事件。
我们可以通过@close=“相应事件”来写需要给子组件传的事件。
父组件:
[code]<el-button style="float: right; padding: 3px 8px" type="text" @click="report(item)">举报</el-button>
[code] <accuse :accuseitem="accuseitem" :accuseVisible="accuseVisible" @close-dialogStatus="Close_dialog"></accuse>
[code] data () { return { accuseitem: {}, accuseVisible: false }
[code] methods: { Close_dialog (val) { this.accuseVisible = false }, report (item) { this.accuseitem = item this.accuseVisible = true } }
子组件:
[code] <el-dialog custom-class="m-dialog" :visible.sync="vis" width="100%" top="0px" @close="closeDialog" :show-close="true" > </el-dialog>
[code] props: { accuseVisible: Boolean, accuseitem: Object },
[code] watch: { accuseVisible (newValue, oldValue) { this.vis = newValue } },
[code] data () { return { vis: false } }
[code] methods: { closeDialog () { this.$emit('close-dialogStatus', true) } }
实现结果:
相关文章推荐
- vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选,默认选中
- 封装element-ui的dialog组件
- element-ui 封装dialog组件
- element-ui dialog组件添加可拖拽位置 可拖拽宽高
- 前端踩坑小结:当elementui的el-dialog组件中包含子组件时,用refs调用子组件时的undefined问题
- vue 基于element-ui 分页组件封装的实例代码
- Element-ui 表单组件date-picker日期格式化为yyyy-mm-dd
- element ui里的组件点击事件不好使
- elementUI select 组件使用详解
- Element-UI踩坑之Pagination组件的使用
- vue 事件总线( vue-bus)非父子组件传值
- window.showModalDialog刷新父窗口 父子窗口之间传值
- window.showModalDialog刷新父窗口 父子窗口之间传值 问题
- React native从入门到深入 ---页面传值,父子组件传值
- element-ui的el-form验证和el-dialog关闭时清除验证
- 基于vue的Element-ui定义自己的select组件
- 问题杂记-Vue父子组件传值(ElementUI-Dialog)
- vue-cli3.0+element-ui上传组件el-upload的使用
- 七牛云图片上传:使用element-ui的upload组件
- vue elementUI tree树形组件遇到的问题