Vue使用ref结合ElementUI中的Dialog实现弹框的封装使用

一室易安

已于 2022-03-10 15:57:28 修改

阅读量2.9k

点赞数

文章标签： javascript vue.js elementui

于 2022-03-10 14:29:45 首次发布

本文链接：https://blog.csdn.net/weixin_45547638/article/details/123399398

版权

本文详细介绍了如何在Vue中利用ref和ElementUI的Dialog组件进行弹框封装，包括父组件引入子组件、子组件的创建与编辑，以及两种方式通知父组件：通过$emit传递参数和直接调用父组件方法。文中强调了ref的使用时机以及父子组件通信的方法。

摘要由CSDN通过智能技术生成

import AAA  from "@/components/AAA"       //其中AAA为子组件名称

在components 中注册组件AAA

父页面中引入创建子组件

<!-- 新增编辑组件 -->
<AAA v-if="showDialog" ref="dataDialog" @btnDialogFun="btnDialogFun"></AAA>

v-if=“showDialog” 为是否显示该组件，注意这是父组件中的方法，目的是用来清除缓存带来的问题。
@btnDialogFun 这是用来父子传参使用
ref=“dataDialog” 为ref的方法是用来控制组件的，dataDialog为自定义的组件实例名，

使用ref

可以使用 this.$refs.dataDialog 获取到的是组件实例，可以使用组件的所有方法

ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

具体案列如下：

<el-button type="primary" @click="addEdit()">新增</el-button>
<AAA v-if="showDialog" ref="dataDialog"></AAA>
<script>
import

关注