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

第一步：父组件中引入子组件

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 AAA  from "@/components/AAA" 
data(){
showDialog: false,// 是否显示弹框控件
},
components: {
   AAA  
 },
methods：{
   // 调用弹框的方法
   addEdit(row) {
     this.showDialog= true; // 显示弹框
     //等待页面加载完成后执行
     this.$nextTick(() => { 
       this.$refs.dataDialog.showDialog(row)	//showDialog为子组件中的方法，这里直接调用方法了
     });
}
</script>

第二步：编辑子组件内容如下

<el-dialog title="title" :visible.sync="dialogVisible"">
        ...//弹框内容
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>


<script>
export default {
data: function() {
    return {
      dialogVisible: false,
      title: ""
    };
  },
  created() {},
  methods: {
    // 定义的方法可供父组件调用
    showDialog(formData) {
      console.log(formData,'我被调用了')
      this.dialogVisible = true;
      this.title = "新增"
      ...
      //其他事件
    },
  }
};
</script>

其他子组件的方法正常使用

第三步：子组件提交后如何通知父组件(方法一 调用函数有参数需求)

这就是子组件给父组件传参的问题了
1，父组件中添加接受的方法如下 @btnDialogFun=“btnDialogFun”

<!-- 新增编辑组件 -->
<AAA v-if="showDialog" ref="dataDialog" @btnDialogFun="btnDialogFun"></AAA>
...
data(){
	searchList: {
          user: '',
          region: ''
        },
},
 methods:{
	//弹框中按钮触发事件
	 btnDialogFun(type){
	     if(type == "XXX"){//确认
	         // 更新数据
	         this.getInit(this.searchList)
	     }
	 },
 }

2，子组件中使用 this.$emit(‘btnDialogFun’,val) 来实现

btnFun(val){
	this.$emit('btnDialogFun',val)
}

第三步：子组件提交后如何通知父组件（方法二，直接调用的方法）

直接使用 this.$parent.getInit() 这个父级方法简单粗暴

btnFun(val){
	//this.$emit('btnDialogFun',val)
	this.$parent.getInit() 
}