新建dialog.vue 组件页面
<template> <div> <el-dialog title="发布商品" center :visible.sync="addShowDialog" :before-close="handleClose" > 新建弹窗 </el-dialog> </div></template><script>export default { props: { // 是否显示弹窗 addShowDialog: { type: Boolean, default: false, }, }, methods: { handleClose() { this.$confirm("确认关闭？") .then((_) => { this.$emit("update:addShowDialog", !this.addShowDialog); }) .catch((_) => {}); }, },};</script>
父组件引入
import addDialog from "./addDialog.vue";
components: { addDialog },
data（）{
return{
addShowDialog: false,
}
}
使用组件
<addDialog v-bind:addShowDialog.sync="addShowDialog"></addDialog>
点击调出弹窗
addProduct() {
this.addShowDialog = !this.addShowDialog
},
