vue3 ts 中快速获取 组件引用的返回类型 element ref 的返回类型

最新推荐文章于 2024-06-18 15:54:01 发布
最新推荐文章于 2024-06-18 15:54:01 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： vue3 ts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45345105/article/details/118274216
版权
vue3 同时被 2 个专栏收录
17 篇文章 1 订阅
订阅专栏
ts
9 篇文章 0 订阅
订阅专栏

直接用 InstanceType<typeof 你的组件> 就好了，获取子组件的返回类型很方便
下面的可以不用看了 旧的

在这里插入图片描述

type TNumaImage = Exclude<ReturnType<Required<typeof NumaImage>['setup']>, void | RenderFunction | Promise<any>>;

发现还有一层才能拿到img里的所有类型

在这里插入图片描述
思路:继续抽取类型然后把这些抽出来的类型放到组件里,后面直接导出就能用了
在这里插入图片描述

在这里插入图片描述

Jack おう
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在Vue3中，开发人员可以利用TypeScript(简称ts)的强类型特性和新的`setup`语法糖来构建更加安全和高效的应用。本教程将详细讲解如何在Vue3项目中结合TypeScript和`setup`语法糖实现图片预览功能。 首先，让我们了解...
Vue3+TS在setup中通过ref获取子组件实例数据
xllllll___的博客
04-14 780
在完成第一步的基础上，在父组件中调用子组件实例中的某个属性的时候，TS会报错，虽然不会影响运行，要解决TS的报错，就需要来声明子组件实例的类型通过上述代码的声明就可以解决TS的报错.toggle();这样，我们就可以在父组件中通过定义的ref属性访问到子组件定义的类型。
vue 组件基本原理详解
panhuanqin的博客
11-05 2414
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;template
Vue3中组件使用ref时获取组件类型推导
最新发布
gaotlantis的博客
06-18 549
但还没完，我们假设每次要使用这个方法，都要写这么一坨东西进去太麻烦了，为了提升便捷程度我们可以将它封装成一个hook，这样我们每次调用他就不需要这么麻烦。此时，我们只需要将组件传入这个hook就可以得到一个有类型推导的组件实例对象，非常的方便😎。来得到的，这不是我们想要的类型，我们想要的是通过这个组件配置对象生成的一个组件实例。此时我们又会看到，类型是有了，但是获取到的是组件配置对象的类型，是通过。实例本质就是一个组件对象，我们需要传入的是类型，所以我们又会想到使用。此时，我们想到一个方法，就是尝试给。
vue组件详解
weixin_43664448的博客
10-13 602
组件 1.1组件与复用 1.2 组件用法 组件需要注册后方能使用，有下面两种注册方式： 全局注册：注册后任何 Vue 实例都可以使用 局部注册：使用 components 选项，注册后的组件只有在该实例作用域下有效。组件中也可使用 components 选项来注册组件，使得组件可以嵌套。 全局注册组件示例代码 Vue.component('my-component', { //选项 }) 局部注册组件示例代码 components: { 'my-component': Child } 在某些情况
InstanceType获取组件实例类型编译不通过
qq_36016136的博客
04-16 2742
项目场景： Vue3 + TS 后台管理系统 问题描述 ref<InstanceType<typeof LoginAccount>>() 代码编译不通过，出现红色下划线。 原因分析： 在网上浏览帖子，说是要使用defineComponent这个函数包裹默认导出的对象，但事实上我的代码里已经这样做了，但还是编译不通过。后面每行代码看了下，发现我没有标注语言使用ts，在script 标签上写明使用ts语言，即<script lang=“ts”>，编译就没问题了。我还把de
6-基于setup语法糖搭建vue3项目的记录
weixin_56817537的博客
08-28 642
setup语法糖搭建vue3项目的记录
基于 vue3+ts 的父组件改变多个子组件的值 和 调用不同子组件的方法
qq_41737172的博客
06-14 1253
基于 vue3+ts 的父组件改变多个子组件的值 和 调用不同子组件的方法
Vue 函数式组件原理和使用详解
热门推荐
陆小森_红齐飘飘的博客
09-02 1万+
Vue 提供了一种称为函数式组件的组件类型，用来定义那些没有响应数据，也不需要有任何生命周期的场景，他只接受一些props 来显示组件。 一：使用方法 Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺少的实例 // 提供第二个参数作为...
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
在Vue3中，为了提高代码复用性和用户体验，开发者经常需要封装一些全局的、通用的UI组件，例如弹窗提示。本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript...
TS+vue3组件开发教程111111111
10-12
在Vue 3中，你可以直接使用TS定义组件的props、data、methods等，这将提供强大的类型检查和自动完成。例如，你可以这样定义一个组件的props： ```typescript interface MyComponentProps { name: string; age: ...
Vue3 Element Plus表格导入导出示例
07-15
在Vue3框架中，Element Plus库提供了一套强大的表格组件，可以满足开发中常见的数据展示、操作需求。本文将深入探讨如何在Vue3项目中利用Element Plus实现表格的导入和导出功能，包括数据的CSV格式导入和导出，以及...
vue3中使用threejs加载fbx模型.zip
07-04
在Vue3中集成Three.js以加载FBX模型是一项常见的任务，尤其在开发3DWeb应用时。Three.js是一个强大的JavaScript库，用于在浏览器中创建和展示3D对象，而FBX是一种广泛使用的3D模型格式，它包含了丰富的动画和材质...
VUE3 常用内置函数
start7000k的博客
07-25 1378
vue3.0
vue3+ts获取子组件的ref类型
慕芃的博客
02-13 357
vue3+ts获取子组件的re类型
获取组件的类型方法ts
qq_43033748的博客
12-06 1135
采用 typeof 获取组件类型 const accountRef = ref<InstanceType<typeof LoginAccount>>() const HandleLoginClick = () => { // console.log(accountRef.value) //可选刚开始有值的之后才获取 accountRef.value?.LoginAction() } return { isKe
vue3+ts获取第三方组件内类型并在ref中使用
weixin_47077674的博客
10-03 6426
前言 最近在将项目从vue2重构至vue3+ts,在其中遇到了很多的坑，这篇文章讲一下如何获取第三方组件的类型，并结合 ref api来获取子组件的节点数据 代码实现 首先讲一下vue3.x版本composition-api,要实现和vue2中$ref获取元素节点的方法，我们使用elementUI中的组件来举例 在vue2版本中获取方式如下 <template> <el-tree ref="treeRef" > </el-tree> </template&g
vue3 的8种通信 方式
gu2022_3_5_21_23的博客
12-25 1537
Vue 3 组件通信
Vue组件注册原理-为什么可以使用自定义标签
小仙儿
03-16 1967
Vue组件注册原理 一、Vue组件的注册 在Vue中使用组件，可能需要用到注册组件，它提供了全局注册和局部注册两种方式。 //全局注册 Vue.component('my-component-name', { /* ... */ }) //局部注册 new Vue({ el: '#app', components: { 'component-a': ComponentA }...
vue3 + ts + element_plus 条形码组件
04-25
好的，我明白您的问题是关于使用Vue3和TypeScript以及Element ...在Vue3中，您可以在setup函数中导入JsBarcode并使用ref来保存条形码信息。最后，您可以使用el-image组件来展示条形码图像。希望这些信息对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值