父組件如下:
<template>
<div class="print">
<el-button @click="bbclick">點擊我彈出公共組件</el-button>
<common-dialog :isShow="isShow" @closeDialogFather="getSonCancel" @sureDialogFather="getSonSure"></common-dialog>
</div>
</template>
<script>
import commonDialog from './commonDialog.vue'
export default {
name: 'print',
data () {
return {
isShow:false
}
},
mounted(){
},
components:{
commonDialog
},
methods:{
bbclick(){
this.isShow=true
},
getSonCancel(val){
this.isShow=val
console.log(this.isShow,'子組件點擊取消后，父組件的isShow的值')
},
getSonSure(){
// 模擬確定按鈕調取接口
setTimeout(()=>{
this.isShow=false
},3000)
},
}, } </script>
子組件如下：
<template>
<div class="print">
<p>我是彈窗組建</p>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
>
<span>大哥好啊，getoutway bitch get out myway</span>
<span slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="sureDialog">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'print',
props:{
isShow:{
type:Boolean,
default:false
},
},
data () {
return {
dialogVisible: this.isShow
}
},
watch: {
isShow () {
this.dialogVisible = this.isShow;
console.log(this.dialogVisible)
}
},
mounted(){
},
methods:{
closeDialog(){
this.dialogVisible=false
this.$emit('closeDialogFather',this.dialogVisible);
},
sureDialog(){
this.$emit('sureDialogFather');
},
},
}
</script>
自己看瑟，
