记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>>();
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue3中使用vant的踩坑实战日记
目录 前言 一.下载vant 二.下载插件 三.配置插件 四.简单使用 五.我的解决方法 总结 前言 我照着视频中老师教的方式去使用vant(和官网教程一样),发现样式根本不起作用(想截个图来着,但是vite热更新太厉害了,找不到了哈哈哈),然后又反复看了视频一遍,检查自己插件啥的而又没有安装好,发现和老师的一样....,头疼…害...,幸好我最后在想用不用在main.js引入vant(因为老师说插件会自动识别,所以一开始一直以为是自己配置或者代码写错了的问题QAQ),最后成功了嘿嘿嘿(但是这样
-
关于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+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官方提供的方法 1.引入方法 2.定义变量,接到我们的方法 3.main.js中定义我们的全局变量 4.页面中使用我们的全局变量 vue3+ts 使用官方方法遇到的问题: 最终我解决问题的方法: 补充:Vue3 getCurrentInstance与ts结合使用的问题 总结 前言: vue3的 setup中是获取不到this的,为此官方提供了特殊的方法,让我们可以使用this,达到我们获取全局变量的目的,但是在使用typescript的时候,就会有一些新的问题产生,这里来做
-
记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循环动画与获取组件尺寸的方法.分享给大家供大家参考.具体分析如下: 一.前言 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.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微信客户端不支
随机推荐
- Powershell 获取特定的网页信息的代码
- 实现百度关键字搜索的批处理
- Python数据分析之真实IP请求Pandas详解
- Python简单的制作图片验证码实例
- Android 中okhttp自定义Interceptor(缓存拦截器)
- php对二维数组按指定键值key排序示例代码
- Javascript中的几种URL编码方法比较
- Zen Coding css,html缩写替换大观 快速写出html,css
- js输出列表实现代码
- 整理Javascript基础语法学习笔记
- jQuery中find()方法用法实例
- 开发中可能会用到的jQuery小技巧
- js中的布尔运算符使用介绍
- Android自定义个性化的Dialog示例
- 网吧服务器设置的不完全攻略大全集
- java 中动态代理机制的实例讲解
- Android中ImageView实现选择本地图片并显示功能
- android编程实现的自定义注释模板实例
- django orm 通过related_name反向查询的方法
- pycharm 批量修改变量名称的方法