记VUE3+TS获取组件类型的方法踩坑及解决

目录
  • VUE3+TS获取组件类型的方法踩坑
    • 遇到的坑
    • 问题原因
    • 解决办法
  • VUE3+TS获取组件ref实例
    • 如何获取组件的类型呢？
  • 总结

VUE3+TS获取组件类型的方法踩坑

获取组件类型的方法

const AccountRef = ref<InstanceType<typeof LoginAccount>>()

遇到的坑

typeof LoginAccount一直报红线提示错误

LoginAction: () => vo...' provides no match for the signature 'new (...args: any): any'.

问题原因

使用的是webstorm codeing，通过webstorm自带右键新建vue文件，创建出来的文件是不带defineComponent的，所以导致上述的一直报红线

<script lang="ts">
export default {

}
</script>

解决办法

引用defineComponent

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({//注意这里的这个小括号不能漏

})
</script>

VUE3+TS获取组件ref实例

使用 vue3 和 ts 时，为了获取 组件 ref 实例，就需要在 ref 函数的泛型中指定类型。

如何获取组件的类型呢？

vue 官方文档中 TypeScript 支持里已经告诉我们了一个获取组件类型的方法，InstanceType<typeof 组件名称>

使用方式如下：

const $userForm = ref<InstanceType<typeof userForm>>();

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3+ts+vite2项目实战踩坑记录

    vue3+ts+vite2项目实战踩坑记录

    目录 1.Vite创建vue3项目 2.配置别名alias 3.引入element-plus 4.glob全局导入 5.静态资源导入 总结: 1.Vite创建vue3项目 使用 NPM: npm init @vitejs/app 使用 Yarn: yarn create @vitejs/app 一个命令快速安装vite+ts+vue3项目: npm init @vitejs/app vite-app --template vue-ts 默认构建好的目录结构是不包含router和vuex的需要手动

  • 使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

    使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

    目录 前言: vue3官方提供的方法 1.引入方法 2.定义变量,接到我们的方法 3.main.js中定义我们的全局变量 4.页面中使用我们的全局变量 vue3+ts 使用官方方法遇到的问题: 最终我解决问题的方法: 补充:Vue3 getCurrentInstance与ts结合使用的问题 总结 前言: vue3的 setup中是获取不到this的,为此官方提供了特殊的方法,让我们可以使用this,达到我们获取全局变量的目的,但是在使用typescript的时候,就会有一些新的问题产生,这里来做

  • 关于Vue3&TypeScript的踩坑汇总

    关于Vue3&TypeScript的踩坑汇总

    目录 安装环境 创建项目 1.配置路由 2.安装VueX 3.安装国际化 4.vite.config.ts常用配置 5.找不到模块声明declare 6.path模块找不到 打包问题 Vite打包后显示跨域 Vue3.0的新语法糖-script setup Css中使用JS代码 Ref.toRef.toRefs.Reactive总结 v-model PropType toRefs解构.Reactive Ref.toRef.toRefs.Reactive readonly isProxy toRa

  • Vue3中使用vant的踩坑实战日记

    目录 前言 一.下载vant 二.下载插件 三.配置插件 四.简单使用 五.我的解决方法 总结 前言 我照着视频中老师教的方式去使用vant(和官网教程一样),发现样式根本不起作用(想截个图来着,但是vite热更新太厉害了,找不到了哈哈哈),然后又反复看了视频一遍,检查自己插件啥的而又没有安装好,发现和老师的一样....,头疼…害...,幸好我最后在想用不用在main.js引入vant(因为老师说插件会自动识别,所以一开始一直以为是自己配置或者代码写错了的问题QAQ),最后成功了嘿嘿嘿(但是这样

  • 记VUE3+TS获取组件类型的方法踩坑及解决

    目录 VUE3+TS获取组件类型的方法踩坑 遇到的坑 问题原因 解决办法 VUE3+TS获取组件ref实例 如何获取组件的类型呢? 总结 VUE3+TS获取组件类型的方法踩坑 获取组件类型的方法 const AccountRef = ref<InstanceType<typeof LoginAccount>>() 遇到的坑 typeof LoginAccount一直报红线提示错误 LoginAction: () => vo...' provides no match for

  • Android中Java根据文件头获取文件类型的方法

    本文实例讲述了Android中Java根据文件头获取文件类型的方法.分享给大家供大家参考,具体如下: 前面讲过Android系统内部的MediaFile类来获取文件类型的办法,这个类主要是根据文件的扩展名来判断,其准确性不是很好.具体可查看Android系统使用MediaFile类判断音频文件类型.其实,获取文件类型最好的办法便是根据文件头信息来判断.下面贴出相关代码: public class FileType { public static final HashMap<String, Str

  • java获取网络类型的方法

    本文实例讲述了java获取网络类型的方法.分享给大家供大家参考.具体如下: /**** * 获取网络类型 * * @param context * @return */ public static String getNetType(Context context) { try { ConnectivityManager connectMgr = (ConnectivityManager) context .getSystemService(Context.CONNECTIVITY_SERVIC

  • jQuery循环动画与获取组件尺寸的方法

    jQuery循环动画与获取组件尺寸的方法

    本文实例讲述了jQuery循环动画与获取组件尺寸的方法.分享给大家供大家参考.具体分析如下: 一.前言 1.jQuery中的animate()方法允许您创建自定义的动画. animate() 方法几乎可以操作所有 CSS 属性,不过当使用 animate() 时,必须使用Camel标记法书写所有的属性名,比如,必须使用paddingLeft而不是padding-left,使用marginRight而不是margin-right,等等.同时,色彩动画并不包含在核心 jQuery 库中.如果需要生成

  • 微信小程序获取网络类型的方法示例 原创

    微信小程序获取网络类型的方法示例 原创

    本文实例讲述了微信小程序获取网络类型的方法.分享给大家供大家参考,具体如下: 这里主要演示通过wx.getNetworkType获取当前网络类型的操作方法.代码如下: index.js: Page({ /** * 页面的初始数据 */ data: { netType:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function () { var that = this; try { wx.getNetworkType({ success: function(res

  • Vue3内置组件Teleport使用方法详解

    目录 1.Teleport用法 2.完成模态对话框组件 3.组件的渲染 前言: Vue 3.0 新增了一个内置组件 teleport ,主要是为了解决以下场景: 有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置 场景举例:一个 Button ,点击后呼出模态对话框 这个模态对话框的业务逻辑位置肯定是属于这个 Button ,但是按照 DOM 结构来看,模态对话框的实际位置应该在整个应用的中间 这样就有了一个问题:组件的

  • Vite vue3多页面入口打包以及部署踩坑实战

    Vite vue3多页面入口打包以及部署踩坑实战

    目录 为什么需要多入口? 一.改造项目 二.vite.config.ts配置 三.部署 总结 为什么需要多入口? 公司原生的移动端上需要用webview引入一些性能要求不高的H5页面,初步考虑后选择用vue试个水,前期页面跳转选择使用vue-router,测试过程中在安卓高版本下右滑返回效果尚可,ios端初步尝试使用的最左侧touch事件移动距离检测以及router判断index添加过场动画,但是整体的效果依然达不到下图的效果. 原先项目中是使用多个html页面以及原生自带的协议去打开html,

  • 记一次MySQL更新语句update的踩坑

    背景 最近在一次线上作业过程中执行了一句DML语句,本以为万无一失,结果应用反馈说没有更新,数据还是没有变,最后经过排查才发现是我语句写错了,导致update语句执行的结果与预期不符. 情景再现 为了方便演示,建立一张用户表,同时插入五条数据. create table user( id int(12) comment '用户主键id', name varchar(36) comment '用户名', age int(12) comment '年龄'); insert into user val

  • Java List的remove()方法踩坑

    目录 1.普通for循环遍历List删除指定元素--错误!!! 2.for循环遍历List删除元素时,让索引同步调整--正确! 3.倒序遍历List删除元素--正确! 4.foreach遍历List删除元素--错误!!! 5.迭代删除List元素--正确! 6.迭代遍历,用list.remove(i)方法删除元素--错误!!! 7.List删除元素时,注意Integer类型和int类型的区别. 总结: Java的List在删除元素时,一般会用list.remove(o)/remove(i)方法.

  • 基于IOS端微信分享失效的踩坑及解决方法

    最近的一个公众号是基于vue的spa应用,在接入微信分享和微信语音的时候出现了:在Android上一切正常,但是在ios端调用wx.config的时候总是失败,去翻了官方文档也并没有找到解决方案,最后在测试中发现是因为初始化的时候传入的URL的问题.具体过程如下: 微信config接口配置,官方文档如下: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支

随机推荐