vue自定义组件+Dialog 对话框组件定制弹出框教程

1、新建一个.vue页面，写一个Dialog组件、把弹出框上想要展示的内容放进去

<template>
  <el-dialog
    title="新增标签"
    :visible.sync="centerDialogVisible"
    width="80%"
    center>
  <div>
    <!-- 这个div放置内容 -->
  </div>
  </el-dialog>
</template>
 
<script>
    export default {
        name: "Popup",
      data(){
          return{
            centerDialogVisible:false
          }
      }
    }
</script>

2.父组件引入并注册Dialog组件 import Popup from '/src/components/labelfact/Popup.vue'; <Popup ref="Popup"></Popup> 3.触发Dialog组件的事件调用 this.$refs.Popup.centerDialogVisible = true;