vue 关于 dialog 的组件封装

封装一个 el-dialog 对话框, 组件减少页面代码量 创建一个组件

: 一般是传数据, 万物皆可传    在子组件中的props中定义 页面中使用
@ 子组件触发的方法 传到父组件汇总做处理 this.$emit("closeDialog"); 把这个名字传给 父组件定义
// 父页面中
   <fan-cata-dialog
      v-if="catalystDialogVisible"
      :dialogVisible="catalystDialogVisible"
      :catalystData="catalystData"
      @closeDialog="closeDialog('catalystDialogVisible')"
    />
    
 // 创建 初始化
 import FanCataDialog from "../../components/catalyst/FanCataDialog.vue";
   components: {
    FanCataDialog,
  },
 // 注册成功 
 
 
 
 请看子页面中写法
 <template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="closeDialog"
    width="40%"
  >
   内容主体
  </el-dialog>
</template>
<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    catalystData: {
      type: String,
      default: "",
    },
  },
  mounted() {
  // 如果进入组件出现出不来时候, 使用 this.$nextTick 加载数据, 等dom更新完成再次调用
  // 
    this.$nextTick(() => {
      this.showJsmolAbbr();
    });
  },
  computed: {
   
  },
  methods: {
    // 关闭dialog
    closeDialog() {
      this.$emit("closeDialog");
    }
  },
};
</script>
<style>
// 必要时候引入 外部的CSS样式
@import "../../assets/style/media/detail.css";
</style>