vue父子组件写法,数据传递,顺便封装 element-ui的弹窗组建

时间:2025-03-15 16:37:37

父组件如下:

<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>

 自己看瑟,

 vue父子组件写法,数据传递,顺便封装 element-ui的弹窗组建