子组件
<template>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="dialogClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogClose">取 消</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name:"dialog",
props:{
dialogVisible:{
type:Boolean,
default:false
}
},
methods:{
dialogClose(){
this.$emit("closeDialog");
}
}
}
<script/>
子组件的调用
<template>
<div class="container">
<el-button @click="showDialog">点击<el-button/>
<dialog :dialogVisible='visible' @closeDialog="hiddenDialog"><dialog/>
<div/>
<template/>
<script>
*引入组件 import Dialog from *
export default {
name:"list",
data(){
return{
visible:false
}
},
components:{
Dialog
},
methods:{
showDialog(){
this.visible = true;
},
hiddenDialog(){
this.visible = false;
}
}
}
<script/>
注意
该弹框为element-UI的弹框,有一部分默认属性,before-close为关闭弹框前的回调,
该用法可以成立,但是若是改为@close则会出现错误,如果有谁知道解决办法,谢谢告知!
我是小白,若是该用法有误,麻烦指出。