1 父组件
<div>
<!-- dialog 弹框-->
<button @click="visible = !visible" >点击弹框</button>
//第一种用法
<!-- <dialog-one visible="visible" @update:visible="changeMessage" > -->
//第二种用法
<dialog-one :="visible" >
<template v-slot:title>
<h3>标题</h3>
</template>
<template>
<p>主体内容，随便写点什么...</p>
<p>主体内容，随便写点什么...说你想说的</p>
<!-- <input type="text" placeholder="请输入信息" /> -->
</template>
<template v-slot:footer>
<!-- <btn-one /> -->
<button class="qx" @click="visible = false">取消</button>
<button class="qd" type="primary" @click="visible = false">确定</button>
</template>
</dialog-one>
</div>
data(){
return{
visible: false,
}
},
methods:{
changeMessage(str){
alert(1)
= str;
}
}
2 子组件
<template>
<div>
<transition name="dialog-fade">
<!--self：事件修饰符，只有点击自己才触发，点击子元素不触发 -->
<div class="dialogWrapper" v-show="visible" @="handleClose">
<button class="dialogHeaderbtn" @click="handleClose">
x
</button>
</div>
</transition>
methods: {
handleClose() {
//visible是父组件传过来的props，子组件不能直接修改，需要子传父
this.$emit("update:visible", false);//子组件传递到父组件，用以上两种方法任意一种都可以
//第一种用法，必须在methods中写函数
<!-- <dialog-one visible="visible" @update:visible="changeMessage" > -->
//第二种用法： 不需要写函数，直接父组件可以接受响应。
// <dialog-one :="visible" >
},
}