Vue3+TS 获取组件对象和方法

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。

在Vue3开发中我们难免想要组件对象，让父组件去访问子组件的方法，那我们应该如何获取呢？

技术栈 :Vue3 + TS + ref Hook + InstanceType ,

如果你对TS还不是很理解请查看 ts文档

如何实现？

实现步骤：

1:给组件绑定一个 ref

2:通过ref传入的泛型拿到组件实例对象类型

3:用户点击按钮时触发 handeldept 方法

4:调用组件的adddept(该方法是子组件提供的) 方法

import dept from "./dept.vue";
//父 组件  
<loginAccount ref="deptRef"></loginAccount>
<el-button type="primary" @click="handeldept">部门加入</el-button>

//TS获取组件对象的 dept() 方法
// 此处的 typeof dept 就是 // import dept from "./dept.vue";;导入的实例 
const deptRef = ref<InstanceType<typeof dept>>();

// ` 登录时的事件处理函数 `
const handeldept = () => {
// 获取到 deptRef 组件实例 的 adddept 方法
  deptRef.value?.adddept();
};

// 子组件
const adddept = async () => {
// 子组件 函数执行体
};
// 用 defineExpose 方法 将 adddept 函数导出 
defineExpose({
  adddept
});

这样就可以实现父组件调用子组件的方法了

有人就会思考，你这是个什么东西？

<InstanceType<typeof dept>>

接下来我们就要看 TS ref的类型声明文件了

文件路径 @vue\reactivity\dist\reactivity.d.ts

export declare interface Ref<T = any> {
    value: T;
    /**
     * Type differentiator only.
     * We need this to be in public d.ts but don't want it to show up in IDE
     * autocomplete, so we use a private Symbol instead.
     */
    [RefSymbol]: true;
}

export declare function ref<T extends object>(value: T): [T] extends [Ref] ? T : Ref<UnwrapRef<T>>;

export declare function ref<T>(value: T): Ref<UnwrapRef<T>>;

export declare function ref<T = any>(): Ref<T | undefined>;

declare const RefSymbol: unique symbol;

上诉代码我们可以看出ref可以接受一个泛型，所以我们可以通过InstanceType 拿到 组件实例类型 但泛型他是不能接收实例对象的，它只能接受类型，所以我们通过 typeof 拿到组件实力的类型，通过 InstanceType 即可将当前组件的所有类型拿到，所有以这就是为什么我们在上面 deptRef.value?.LoginAction() 的原因

<InstanceType<typeof adddept>>

一段代码带你学会 Vue3+TS 获取组件对象和方法

Vue3+TS 获取组件对象和方法

如何实现？