vue3+ts通过ref访问组件里面的方法及属性

Shero.李建业2024-01-03 13:42

vue3+ts通过ref访问组件里面的方法及属性

之前访问不到主要是子组件没有往外暴露要访问的接口子组件使用了 script setup的组件是默认私有的：一个父组件无法访问到一个使用了 script setup的子组件中的任何东西，：
除非子组件在其中通过 defineExpose方法宏显式暴露
子组件

<template>
  <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" :root-style="{ color: 'blue' }"
    title="Basic Drawer" placement="right">
  </a-drawer>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const open = ref(false);
const showDrawer = () => {
  open.value = true;
};
defineExpose({
  showDrawer
})
</script>

父组件

 <ApiModel ref="refApiModel"/>
import ApiModel from "./components/ApiModel.vue"
const refApiModel:any=ref(null)
const actionApiRecord=(type:string,record:any)=>{
  switch(type){
    case 'add':
        refApiModel.value?.showDrawer()
      break;
  }
}