初学者,看网上大段大段脑壳痛,自己尝试写了一个简简单单的
父组件

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

前往低代码交流专区

更多推荐