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

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

<template><el-dialogtitle="新增标签":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;

注：弹出框周围要有阴影部分，否则说明用错组件了