父传子,这个跟vue2.0X差不多

<template>
  <div class="home">
<a-button type="primary" @click='goRight'>
      Primary 
    </a-button>
    <a-radio>Radio</a-radio>
   <## 组件传值 ##>
    <Drawer title='详情页' :visible='visible' @afterVisibleChange='afterVisibleChange'></Drawer>
  </div>
</template>

<script lang="ts">
import { onMounted,ref,reactive,toRefs } from 'vue';
import { useStore } from "vuex";
import { findAgentLogListByAgentId } from '@/assets/api/home'
import Drawer from '@/components/drawer.vue'

export default {
  name:'home',
   components: {
     Drawer
  },
  setup(){
     const visible:any = ref(false); //控制显示隐藏
     const state:object =reactive({
    
     }) 
    onMounted(()=>{
  
    });
    const goRight=()=>{
      visible.value = true
    };
    //这个是接收子组件传来的方法
    const afterVisibleChange=(val:boolean)=>{
      visible.value = val;
    };
    return {
      goRight,visible,afterVisibleChange,...toRefs(state)
    }
  }
}
</script>
<style lang="less" scoped>
 .home{
   width: 100%;
   height: 100%;
   position: relative;
 }

</style>
<style>
 .ant-drawer-content-wrapper{
   widows: 80%;
 }
</style>

子组件

<template>
    <a-drawer
    :title="title"
    placement="right"
    width='70%'
    :maskStyle='maskStyle'
    :closable="true"
    v-model:visible="visible"
    :after-visible-change="afterVisibleChange"
  >
      <!-- <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p> -->
    </a-drawer>
</template>
<script lang='ts'>
import {ref,toRefs,reactive} from 'vue'
export default {
//这个为关紧
   props: {  //接收子组件传值
    title: String,
    visible:Boolean
  },
    setup(props:object,cex:any){ //接收子组件传值 //这个为关紧
      const state = reactive({
            maskStyle:{
              "background-color": "rgba(0, 0, 0, 0)"
            }
      })
      const afterVisibleChange=(val:boolean)=>{//子组件给父亲的方法
         cex.emit('afterVisibleChange',val)
      };
      return {
        ...toRefs(state),afterVisibleChange,props
      }
    }
}
</script>
<style lang="less" scoped>


</style>

实际效果点击按钮侧边弹出,点击关闭实现关闭

在这里插入图片描述

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐