首页 > 其他分享 >Vue3中组件使用ref时获取组件类型推导

Vue3中组件使用ref时获取组件类型推导

时间:2024-07-12 11:08:02浏览次数:14  
标签:ts 类型 实例 Vue3 组件 ref 我们

本文由 ChatMoney团队出品
我们在使用Vue3+ts开发时,常常会用到一些第三方组件库,比如Element-Plus UI、Navie UI等,这些UI框架中有些组件常常会暴露一些方法给我们便捷的去实现各种复杂的交互,我们经常会像下面这样去给组件定义一个ref去获取组件的实例:

<template>
  <div>
    <el-drawer ref="drawerRef" v-model="showDrawer">
      <el-button type="primary" @click="closeHandle">关闭</el-button>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElDrawer } from "element-plus";

const drawerRef = ref();
const showDrawer = ref<boolean>(true);

const closeHandle = () => {
  drawerRef.value.handleClose();
};
</script>

这个方法可以正常使用,但是没有任何的ts类型推导,这也就丧失了一部分我们使用ts的初衷。由于我们没有给ref传入任何的泛型,所以drawerRef是any类型,效果如下:

此时,我们想到一个方法,就是尝试给const drawerRef = ref()定义类型,我们第一想到的肯定是将组件传进去不就好了,但其实这样会报错,效果如下:

因为传入的ElDrawer实例本质就是一个组件对象,我们需要传入的是类型,所以我们又会想到使用typeof来获取他的类型不就行了吗,因为在js中,typeof得到的是js中的类型,他是运行时的,但在ts中将typeof写到类型标注的位置的话,得到的是ts的类型,我们来试试看效果怎么样:

此时我们又会看到,类型是有了,但是获取到的是组件配置对象的类型,是通过DefineComponent来得到的,这不是我们想要的类型,我们想要的是通过这个组件配置对象生成的一个组件实例。

接下来重点来了,有一个ts的一个工具叫InstanceType,这个工具可以用来获取一个对象的实例,我们加上去的效果如下:

捕捉到了这个组件暴露出来的handleClose方法,现在终于可以获取到我们想要的类型了。

……但还没完,我们假设每次要使用这个方法,都要写这么一坨东西进去太麻烦了,为了提升便捷程度我们可以将它封装成一个hook,这样我们每次调用他就不需要这么麻烦。

根据刚刚的理解,我们最终得到了以下封装结果:

import { ref } from "vue";

/**
 * 组件类型标注
 * @param _component 组件实例
 * @returns 完整类型标注的响应式组件实例
 */
export const useComponentRef = <T extends abstract new (...args: any) => any>(
  _component: T
) => {
  return ref<InstanceType<T>>();
};

此时,我们只需要将组件传入这个hook就可以得到一个有类型推导的组件实例对象,非常的方便

标签:ts,类型,实例,Vue3,组件,ref,我们
From: https://www.cnblogs.com/chatlin/p/18297901

相关文章

  • vue 父子组件传值
    先说问题,在vue组件haul开发中,遇到了父组件往子组件传值的问题,父组件点击,子页面dialog不展示,注:这个问题浪费了我很长还见,网上找了一堆答非所问的答案都不行,记录一下父<template><v-myDialog:dialog_format="exampleDialogFormat":data_format="exampleDataFormat"......
  • 如何用Vue3和Plotly.js创建交互式表格?
    本文由ScriptEcho平台提供技术支持项目地址:传送门Plotly.js动态生成HTML表格应用场景介绍在数据分析和可视化领域,经常需要以表格的形式展示数据。Plotly.js是一款功能强大的JavaScript库,不仅可以创建交互式图表,还可以动态生成HTML表格。代码基本功能介绍本代......
  • 如何用Vue3和Plotly.js绘制交互式瀑布图
    本文由ScriptEcho平台提供技术支持项目地址:传送门使用Plotly.js在Vue中创建瀑布图应用场景瀑布图广泛用于可视化财务报表和展示增量变化,例如利润表、现金流量表和收入分析。它们通过将正值和负值堆叠在垂直轴上,清晰地展示每个阶段的贡献和变化。基本功能本代码演......
  • 如何用Vue3和Plotly.js创建交互式平行坐标图
    本文由ScriptEcho平台提供技术支持项目地址:传送门Vue.js中使用Plotly.js创建平行坐标图应用场景介绍平行坐标图是一种可视化高维数据集的强大技术。它可以帮助我们探索不同维度之间的关系,并识别模式和异常值。在Vue.js应用程序中,我们可以使用Plotly.js库轻松创......
  • AWS JDBC Driver连接中国区的Aurora需要配置参数 enableClusterAwareFailover=false
    AWSJDBCDriver中国区和Global区域的区别是,由于中国区AuroraEndpoint与Global的后缀不同,中国区的AWSJDBCDriver其实无法识别中国区endpoint,因为中国区的资源endpoint是以".cn"结尾,这个endpoint不被认为是aurora的endpoint,会被认为是customdomain.因此应用程序在使用AW......
  • Vue3+ts 尚硅谷笔记(2024版)
    1.简介B站视频是尚硅谷Vue3+typescript天禹老师2.介绍1.1.【性能的提升】打包大小减少41%。初次渲染快55%,更新渲染快133%。内存减少54%。1.2.【源码的升级】使用Proxy代替defineProperty实现响应式。重写虚拟DOM的实现和Tree-Shaking。1.3.【拥抱TypeScript】Vue3......
  • vue3实现在style中使用响应式变量
    vue2的时候需要在style模块中访问script模块中的响应式变量,为此不得不使用css变量去实现。现在vue3已经内置了这个功能啦,可以在style中使用v-bind指令绑定script模块中的响应式变量。示例<template><div><span>hello</span><spanclass="color">wolrd</span>......
  • K8S各组件概念以及原理知识总结
    简述ETCD及其特点? etcd是CoreOS团队发起的开源项目,是一个管理配置信息和服务发现(servicediscovery)的项目,它的目标是构建一个高可用的分布式键值(key-value)数据库,基于Go语言实现。特点:简单:支持REST风格的HTTP+JSONAPI安全:支持HTTPS方式的访问快速:支持并......
  • vue3 smooth-signature 带笔锋手写签名
    mini-smooth-signature 小程序版带笔锋手写签名,支持多平台小程序使用参考:GitHub-linjc/smooth-signature:H5带笔锋手写签名,支持PC端和移动端,任何前端框架均可使用一、安装npminstallsmooth-signature#或yarnaddsmooth-signature 或通过<script>引用,全局变量......
  • 界面组件Kendo UI for React 2024 Q2亮点 - 生成式AI集成、设计系统增强
    随着最新的2024年第二季度发布,KendoUIforReact为应用程序开发设定了标准,包括生成式AI集成、增强的设计系统功能和可访问的数据可视化。新的2024年第二季度版本为应用程序界面提供了人工智能(AI)提示,从设计到代码的生产力增强、可访问性改进、一系列新的UI组件等。KendoUI致力......