Vue3+TS在setup中通过ref获取子组件实例数据

一.TS中的InstanceType:

       在TypeScript中，InstanceType是一个用于获取构造函数类型的实例类型的内置泛型工具，

它是用于获取构造函数创建的实例的类型，一般的话，它通常与typeof一起使用来获取构造函数创建的实例类型。

   下面举个例子来说明InstanceType的用法：

假设我们创建了一个自己类myClass:

class myClass{
   constructor(public name:string){}
}

 现在我们要获取myClass的实例类型

type MyClassInstance=InstanceType<typeof MyClass>;//获取了MyClass的实例类型
const instance:MyClassInstance=new MyClass("example");
console.log(instance.name);

在上述操作中，MyClassInstance 是MyClass类的实例类型，我们就可以在后续中使用类型安全地创建和操作类的实例。

二.Vue3中的defineExpose()

      在vue3中使用<script setup>语法糖的组件是默认关闭的，也就是说通过模版引用或者是$parent链获取到的组件的公开实例，不会暴露任何在<script setup>中声明的绑定。

        可以通过使用defineExpose()编辑器宏来显式指定在<script setup>组件中要暴露出去的属性，如下所示：

<script setup>
import {ref} from 'vue'
const a=1;
const b=ref(2)
defineExpose({
a,b
})
</script>

 当父组件中通过模版引用的方式获取到当前组件的实例的时候，获取到的实例就会像这样{a:number,b:number} (ref 会和在普通实例中一样被自动解包)

三.通过Ref后获取子组件实例的步骤:

      1.首先在子组件中暴露出去需要被父组件调用的属性

      2.在子组件中定义类型

      3.父组件引入子组件的类型，并且定义ref

3.1在子组件中通过defineExpose暴露子组件的属性

这里在子组件中定义了一个toggle方法，并且通过defineExpose暴露出去 

<script setup lang="ts">
const toggle=():void=>{
    state.show=!state.show;
};
defineExpose({
    toggle
})
</script>

 3.2在子组件中定义组件实例类型

  在完成第一步的基础上，在父组件中调用子组件实例中的某个属性的时候，TS会报错，虽然不会影响运行，要解决TS的报错，就需要来声明子组件实例的类型

子组件中：

export interface API{
    toggle:()=>void
}

通过上述代码的声明就可以解决TS的报错

3.3在父组件中引入子组件定义的类型 ，并且定义Ref

父组件中：

import PopMonth,{type API as childTwoAPI}  from '../components/PopMonth.vue';
const popMonthRef=ref<null | childTwoAPI>(null);
const monthToggle=()=>{
    popMonthRef.value?.toggle();
};

这样，我们就可以在父组件中通过定义的ref属性访问到子组件定义的类型

四.子组件中不使用<script setup>的情况

子组件中：

<script lang="ts">
import { ref, defineComponent } from "vue";
export default defineComponent({
  name: "Son",
  setup() {
   const toggle=():void=>{
    state.show=!state.show;
};
    return {
      toggle,
    };
  },
});
</script>

如果子组件中不使用<scriprt setup>的时候，在父组件中使用子组件定义的实例类型的时候就可以使用InstanceType 

import PopMonth  from '../components/PopMonth.vue';
const popMonthRef=ref<InstanceType <typeof PopMonth>>();
const monthToggle=()=>{
    popMonthRef.value?.toggle();
};