vue组件通信实例：el-dialog作为子组件

原因：一个.vue文件有点大，里面有很多el-dialog，接口，参数。所以我分离了一下，把el-dialog作为子组件。

从父组件传prop到子组件，完成组件通信。

子组件pushDialog.vue文件：其中open由父组件传过来开启子组件，close方法由子组件触发父组件关闭。

<template>
  <div>
    <el-dialog
      width="60%"
      title="移入栏目列表"
      :visible.sync="open"
      append-to-body
      :before-close="close"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="close" type="primary">保存</el-button>
        <el-button @click="close">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

子组件的js

export default {
  name: "pushDialog",
  props: {//接受父组件传过来参数值的子组件参数
    open: Boolean,
    currentClassifyNames: "",
  },
  data() {
    return {},
  },
  methods: {
  	//在子组件中需要向父组件传值处使用this.$emit("function",param); 其中function为父组件定义函数，param为需要传递参数
    close() {
      let show = false;
      this.$emit("pushDialogHide", show);
    },
  },
}

父组件调用：
pushDialogHide为父组件定义方法用于子组件调用，方法触发父组件定义的函数hideDialog。
:open 和 :currentClassify对应子组件的参数名称，用于接受父组件传参。
pushDialogOpen 和 currentClassify为父组件定义的参数值，需要传到子组件。

<el-button type="success" size="mini" @click="goPushColumn">移入栏目</el-button>
<!-- 移入栏目弹窗框 -->
    <push-dialog
      @pushDialogHide="hideDialog"
      :open="pushDialogOpen"
      :currentClassifyNames="currentClassify"
    >
    </push-dialog>

父组件script

import PushDialog from "./pushDialog.vue";
export default {
  name: "initialColumn",
  components: { PushDialog },
  data() {
    return {
      // 控制弹窗显示隐藏的值
      pushDialogOpen: false,
      // 需要传到父组件的值
      currentClassify: undefined,
     } 
  methods: {
    //..给currentClassify赋值操作（省略掉..）...//
    // ...  //
    
    /** 给子组件传参 */
    goPushColumn() {
      this.pushDialogOpen = true;
      this.currentClassifyNames = this.currentClassify;
    },
    // 父组件方法@pushDialogHide关闭弹窗调用的函数hideDialog
    hideDialog() {
      this.pushDialogOpen = false;
    },
  },
};

实现了避免vue文件代码冗杂，完成了父子组件通信。

参考了两篇文章：
https://blog.csdn.net/sisi_chen/article/details/81635216
https://blog.csdn.net/weixin_43988238/article/details/107658002