vue3 + ts 获取组件 ref 实例

已于 2022-04-19 09:24:09 修改
阅读量4.7k 收藏 4
点赞数 2
文章标签： vue typescript
于 2022-04-19 09:23:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61353077/article/details/124265339
版权

vue3 + ts 获取组件 ref 实例

使用 vue3 和 ts 时，为了获取 组件 ref 实例，就需要在 ref 函数的泛型中指定类型。如何获取组件的类型呢？
vue 官方文档中 TypeScript 支持里已经告诉我们了一个获取组件类型的方法，InstanceType<typeof 组件名称>，使用方式如下：

const $userForm = ref<InstanceType<typeof userForm>>();
PandaHiHiHi
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue3+TS ref的使用
白瑕 的博客
07-17 3346
对ref的用法有点模糊, 整理一下吧.
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts中如何获取ref属性的值
weixin_46039052的博客
09-23 268
相当于给标签id，然后像js一样使用getElementById一样获取其方法。
vue3+ts中ref与reactive指定类型实现示例详解
Free雅轩的博客
07-13 8727
ref 的基础特性ref 约等于 reactive({ value: x })ref() 可以定义时无参数，第一次赋值任意类型，然后就不能增加属性 const refa = ref(6) const rcta = reactive({ value: 12 }) console.log('refa:', refa) //RefImpl{...} console.log('refa:', refa.value) //6 console.log('rcta:', r
vue3+ts,父组件通过ref主动获取子组件的数据，涉及到的defineExpose和callback函数讲解_vue 子组件外抛使用callback方式
最新发布
m0_60388117的博客
04-18 479
/传给父组件的方法//用defineExpose把方法暴露出去submitInfo})最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！
vue3+ts通过ref访问组件里面的方法及属性
偏执的小男孩儿
01-02 861
vue3+ts通过ref访问组件里面的方法及属性
vue3+ts中定义ref变量，设置变量类型
m0_67265919的博客
03-01 5100
给定义的 ref 的值设置类型 <template> <el-input ref="input"></el-input> </template> //.... import {Ref, ref} from 'vue' const input: Ref<HTMLElement> = ref(null) 这样写之后会导致编译报错（vuetur报错） Type 'Ref<null>' is not assignable to type
vue3+ts实战项目组件工具库.zip
03-03
vue3+ts实战项目组件工具库.zip vue3+ts实战项目组件工具库.zip vue3+ts实战项目组件工具库.zip
vue3-jsonschema：vue3 + ts的组件库
02-14
vue3-jsonschema vue3 + ts的组件库1，表单生成2，主题系统3，插件系统
vue3 + ts 基于elementplus 后台管理系统模板.zip
05-13
vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统...
vue3+ts+antd 前端基础模板
01-14
新的响应性系统：Vue 3 引入了一个新的响应性系统，使得在组件中跟踪和更新状态更加简单和高效。 新的生命周期钩子：Vue 3 引入了一些新的生命周期钩子函数，使开发者可以更好地控制组件的生命周期。
vue3 ts语法定义ref对象
choorn的博客
05-05 2417
1、引入Ref 的 type。2、定义Ref类型的对象。
Vue 3 setup 中通过 ref 获取子组件实例数据(TS版）
热门推荐
任磊
08-04 1万+
vue3 在setup当中父组件获取子组件的实例数据
vue3 ts获取组件 ref元素的值
曲江涛的博客
05-16 2821
函数创建一个 ref，并将其绑定到组件的 ref 属性上。然后，可以通过访问 ref 的。在 Vue 3 + TypeScript 中，要获取组件 ref 元素的值，可以通过。然后，我们可以调用组件的方法或访问组件的属性。请注意，在 TypeScript 中，为了类型安全，我们将。的具体类型，可以将其替换为正确的类型。方法或对应的需要获取的属性。在上述代码中，我们首先使用。的 ref，并将其绑定到。属性来获取该组件的实例。
VUE3与TS结合写法详解
2301_77456141的博客
09-21 5694
car?: string}>()}>()项目中安装的第三方库里面都是打包后的JS代码，但是我们使用的时候却有对应的TS类型提示，这是因为在第三方库中的JS代码都有对应的TS类型声明文件。通俗地来讲，在 TypeScript 中以 .d.ts 为后缀的文件，我们称之为 TypeScript类型声明文件。它的主要作用是描述 JavaScript 模块内所有导出成员的类型信息。.ts 文件:既包含类型信息又可执行代码可以被编译为 .js 文件，然后，执行代码用途：编写程序代码的地方。
vue3 +ts 动态绑定 响应式 数组
HHH917的博客
03-04 1万+
代码 //定义ts 接口类型 interface editFormDataType { label: string | number | boolean value: string | number | boolean prop: string } //需要绑定变量 editFormData 方法一: ref //定义变量 const editFormData = ref([] as editFormDataType[]) // 使用 editFormData.value =
vue3获取ref实例结合ts的InstanceType
动感超人的博客
02-02 2530
有时候我们模板引用,但是在使用的时候,ts提示却不行,没有提示组件通过暴露的方法名称,虽然这不是很影响,但是可以解决还是可以解决下~const sayHello = () => (console.log('我会说hello'))sayHello})然后我们在父级使用,输入完成会发现没有sayHello这个函数提示,所以这个时候我们就需要使用工具类型来获取其实例类型
vue3 使用ref函数
seimeii的博客
09-15 710
使用ref函数
vue3+ts 获取动态组件component 实例调用里面组件的方法
06-10
在Vue3中使用TypeScript获取动态组件component实例调用里面组件的方法，可以先通过 `ref` 获取动态组件的实例，再通过 `as` 关键字将其转换为具体的子组件类型，从而调用子组件中的方法。 例如，假设有一个动态组件 `MyComponent`，其中包含了一个子组件 `ChildComponent`，并且我们需要在父组件中获取 `ChildComponent` 实例并调用其方法。可以使用如下代码： ```vue <template> <div> <component :is="selectedComponent" ref="myComponent"></component> <button @click="handleClick">Call Child's Method</button> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' import ChildComponent from './ChildComponent.vue' export default defineComponent({ components: { ChildComponent }, data() { return { selectedComponent: 'ChildComponent' } }, setup() { const myComponentRef = ref<MyComponent | null>(null) const handleClick = () => { const childComponent = myComponentRef.value?.$refs.child as ChildComponent if (childComponent) { childComponent.doSomething() } } return { myComponentRef, handleClick } } }) </script> ``` 在上面的代码中，我们使用 `ref` 将动态组件 `MyComponent` 的实例绑定到 `myComponentRef` 变量上，并使用 `as` 关键字将其类型转换为 `MyComponent | null`。然后，在 `handleClick` 方法中，我们通过 `myComponentRef.value?.$refs.child` 获取到子组件 `ChildComponent` 的实例，并将其类型转换为 `ChildComponent`。最后，我们就可以调用 `ChildComponent` 中的方法了。 需要注意的是，在模板中使用 `ref` 时，需要添加一个 `.value` 后缀来访问 `ref` 变量所引用的对象。例如，上面的代码中，我们通过 `myComponentRef.value?.$refs.child` 来获取子组件 `ChildComponent` 的实例。 另外，如果子组件中的方法需要访问子组件的数据或者方法，可以使用 `provide` 和 `inject` 方法来实现。具体使用方法可以参考 Vue3 官方文档。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值