Vue+TypeScript开发中TS不识别this.$refs的问题

最新推荐文章于 2024-04-26 16:47:03 发布

和世界不一样，那就不一样！

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.4k

点赞数 1

分类专栏： VUE TypeScript 文章标签： vue.js typescript javascript

本文链接：https://blog.csdn.net/weixin_44834981/article/details/128640078

版权

VUE 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

TypeScript

2 篇文章 0 订阅

订阅专栏

用iview框架开发后管系统，需要用到form表单功能，最后提交表单代码是：

this.$refs.form.validate(......)

代码报错

Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property 'validate' does not exist on type 'Vue'

既然TS不知道this. $re f s 是什么，那么我们需要给它加上类型断言，告诉它是什么，也就是需要把 t hi s .$ refs[formName] 显式标注为你的那个组件类型；
我项目中的解决方案是：

 ;(this.$refs['form'] as HTMLFormElement).validate(...)

优惠劵

和世界不一样，那就不一样！

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue+TypeScript开发中TS不识别this.$refs的问题

Vue+TypeScript开发中TS不识别this.$refs的问题
复制链接

扫一扫

专栏目录

vue列表单项展开收缩功能之this.$refs的详解

10-17

主要介绍了vue列表单项展开收缩功能之this.$refs的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Vue 解决通过this.$refs来获取DOM或者组件报错问题

10-15

主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

参与评论您还未登录，请先登录后发表或查看评论

如何解决ts无法识别vue中的$refs

kaosini的专栏

01-07

6913

ue中$refs可能会返回一个vue对象或者是Element对象，但是typescript并不知道这是个什么玩意儿，怎么解决这个问题呢？解决办法是我们手动指定其类型，例如有一个ScrollView.vue组件，我在父组件中引用它。 <template> <scroll-view ref="scrollView"></scroll-view> <...

vue3及与vue2的区别总结（部分）

热门推荐

李@@的博客

07-12

4万+

1.生命周期的变化：3.x(上） 2.x（下）不难看出，vue3.0与vue2.0之间生命周期函数在销毁的时候有变化： beforeDestroy --> beforeUnmount destroyed --> unmounted 其他的区别主要在于书写使用的语言上的差别在ts中使用 class 类组件书写可以参考 vue-class-component 或者 vue-property-decorator 书写的风格和vue2.0的选项式区别不大。如果使用js书写代码则应当使用组

vue ts父组件使用ref调用子组件的方法或获取子组件的值

pig_pig32的博客

03-05

2896

vue2.0 ts父组件使用ref调用子组件的方法和值父组件中用ref绑定子组件，然后通过this.$refs.名字就可以获取子组件的值或调用相关方法。父组件 <template> <div> <div class="parent"> <h1>父组件名字:{{parentName}}</h1> <a-button type="primary" size="large" @click="refGetCh

Vue+TypeScript项目中不识别this.$refs

godev的博客

08-01

1199

意思大致是`validate()`并不是`Vue`的方法，它只是你某个组件的方法。所以你需要把 `this.$refs.ruleForm` 显式标注为那个组件类型

解决Vue+TypeScript开发中TS不识别this.$refs的问题

一个女胖子的博客

07-09

1万+

问题场景：用iview框架开发后管系统，需要用到form表单功能，最后提交表单代码是： this.$refs.form.validate(......) 但是代码报错： Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'. Property 'validate' does not exist on type 'Vue' 因为第一次用TS也是很蒙，查找了网上大概思路就是validate() 并不是

vue3+ts引用vue2的组件解决$refs获取子组件里的方法和属性问题

qq_28134589的博客

05-13

892

vue3+ts引用vue2的组件怎么$refs获取子组件里的方法父组件直接传参进去子组件watch监听判断值调用方法

Vue3 + ts 第三篇

gu2022_3_5_21_23的博客

12-25

362

【代码】Vue3 + ts 第三篇。

【typeScript】vue + ts使用$refs调用函数报错

Kamen_Yip的博客

04-28

1万+

在父组件调用子组件方法的时候，经常会用到ref属性常规写法如下：  <span ref="quickEntry"></span> 子组件中的方法： selected() { console.log('我是子组件函数') }, // 父组件调用子组件函数 this.$refs.quickEntry.selecte...

Vue中的this.$options.data()和this.$data用法说明

10-15

主要介绍了Vue中的this.$options.data()和this.$data用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

记录解决vue+ts父组件使用$refs调用子组件方法

花下木

08-24

3153

创建子组件 <template> <div> </div> </template> <script lang="ts"> import { Component, Vue, Watch, Prop, Emit } from "vue-property-decorator"; @Component({}) export default class Child extends Vue { private flag = false; publi.

this.$refs类型识别问题、四种类型写法

fxinn的博客

02-18

646

ts，$refs类型完善，$refs上能查询到 codemirror对象，但是不能访问到 codemirror 对象下面一级的对象

vue3+ts中如何获取ref属性的值

qq_45287575的博客

12-13

2644

vue3+ts中如何获取ref属性的值

vue3 ts获取组件 ref元素的值

曲江涛的博客

05-16

2613

函数创建一个 ref，并将其绑定到组件的 ref 属性上。然后，可以通过访问 ref 的。在 Vue 3 + TypeScript 中，要获取组件 ref 元素的值，可以通过。然后，我们可以调用组件的方法或访问组件的属性。请注意，在 TypeScript 中，为了类型安全，我们将。的具体类型，可以将其替换为正确的类型。方法或对应的需要获取的属性。在上述代码中，我们首先使用。的 ref，并将其绑定到。属性来获取该组件的实例。

vue3 typescript 在methods和setup中使用$refs并解决Object is possibly “null”

青颜的天空的博客

09-13

5902

在vue中，通常在template中给某组件设置了 ref属性后，在methods中，直接this.$refs调用即可。但是使用了typescript后，this.$refs.xxx将会被提示Object is of type 'unknown'。这需要将变量定义一下类型。 import XXComponent from 'XXComponent.vue'; ... (this.$refs.xxx as XXComponent).method import { XXComponent } from '

[原创] vue中的this.refs为空出现原因分析

大象的博客

06-08

3万+

场景：在使用vue过程中，本想调用子组件的数据，但尝试多次一直获取失败。经过分析有以下原因： 1，在生命周期mounted之前的钩子函数中去调用会获取不到，原因是DOM节点都没有生成。 2 ，this.refs的组件在v-if为false的父节点下，导致这个子组件未渲染，所以获取不到。总结:一定是组件已经渲染成功才能调用组件的数据。而不是页面加载完成后就一定能获取到...

vue快速入门（四十六）Router的安装与使用

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交