vue3通过elementui实现dialog弹出页面并传参
初学者,看网上大段大段脑壳痛,自己尝试写了一个简简单单的父组件<template><div class="home"><el-button @click="btnAdd">添加用户</el-button><el-dialog v-model="visible" title="添加用户"><post-refused-detail @y
·
初学者,看网上大段大段脑壳痛,自己尝试写了一个简简单单的
父组件
<template>
<div class="home">
<el-button @click="btnAdd">添加用户</el-button>
<el-dialog v-model="visible" title="添加用户">
<post-refused-detail @yourself='myself' :msg='msg'></post-refused-detail>
</el-dialog>
</div>
</template>
<script>
import {ref} from 'vue'
import PostRefusedDetail from './mainPostComponents/PostRefusedDetail.vue'
export default{
name:'MainPostDelivered',
props:{
},
components:{
PostRefusedDetail
},
emits:['myself'],
setup(props,ctx){
let msg=ref('zheshimsg')
let visible=ref(false);
function btnAdd() {
visible.value = true;
}
let myself=(val)=>{
visible.value = val;
}
return{
visible,btnAdd,myself,msg
}
}
}
</script>
<style lang='scss' scoped>
.globa_text_font{
font-size: 1.4*$global_font;
}
.globa_text_margin{
margin-top: 20px;
}
.global_right{
text-align: right;
}
</style>
子组件
<template>
<h3>{{msg}}</h3>
<el-button @click="sendToP">close</el-button>
</template>
<script>
import {ref} from 'vue'
export default{
name:'PostRefusedDetail',
props:{
msg:{
type:String
}
},
components:{
},
emits:['yourself'],
setup(props,ctx){
let st=ref(false)
let sendToP=()=>{
ctx.emit("yourself",st.value)
}
return{
st,sendToP
}
}
}
</script>
<style lang='scss' scoped>
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)