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;