vue3获取ref实例结合ts的InstanceType问题怎么解决-Vue.js-PHP中文网

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from &#39;vue&#39;

const sayHello = () => (console.log(&#39;我会说hello&#39;))

defineExpose({
  sayHello
})
</script>

登录后复制

然后我们在父级使用，输入完成MyModalRef.value会发现没有sayHello这个函数提示，所以这个时候我们就需要使用InstanceType 工具类型来获取其实例类型

<!-- App.vue -->
<script setup lang="ts">
import MyModal from &#39;./MyModal.vue&#39;
const MyModalRef = ref()

const handleOperation = () => {
  MyModalRef.value.sayHello
}
</script>

登录后复制

vue3获取ref实例结合ts的InstanceType问题怎么解决

使用InstanceType 工具类型获取其实例类型：

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from &#39;vue&#39;

const sayHello = () => (console.log(&#39;我会说hello&#39;))

defineExpose({
  open
})
</script>

登录后复制

父级使用

<!-- App.vue -->
<script setup lang="ts">
import MyModal from &#39;./MyModal.vue&#39;

const MyModalRef = ref<InstanceType<typeof MyModal> | null>(null)

const handleOperation = () => {
  MyModalRef.value?.sayHello()
}
</script>

登录后复制

貌似依旧没有提示使用InstanceType在提示的时候，然后输入错误内容也没有在编译前进行报错…，不过vue官方这样子说了，那就听他的吧(其实我一般不用，不过也学到了)

@vue官方API为组件模板引用标注类型

如何为vue3组件标注TS类型

Vue3和TS绝对是在今年最受欢迎的前端技术之列。许多公司正在使用 Vue3 + TS + Vite 组合来开发新项目。以下是重写后的句子：分享在Vue3组件中如何使用Composition-Api结合TS类型。

为 props 标注类型

使用

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7521

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

Vue3+TS+Vite开发技巧：如何进行SEO优化 Sep 10, 2023 pm 07:33 PM

Vue3+TS+Vite开发技巧：如何进行SEO优化SEO（SearchEngineOptimization）是指通过优化网站的结构、内容和关键词等方面，使其在搜索引擎的排名更靠前，从而增加网站的流量和曝光度。在Vue3+TS+Vite等现代前端技术的开发中，如何进行SEO优化是一个很重要的问题。本文将介绍一些Vue3+TS+Vite开发的技巧和方法，帮

vue3+vite:src使用require动态导入图片报错怎么解决 May 21, 2023 pm 03:16 PM

vue3+vite:src使用require动态导入图片报错和解决方法vue3+vite动态的导入多张图片vue3如果使用的是typescript开发，就会出现require引入图片报错，requireisnotdefined不能像使用vue2这样imgUrl:require(’…/assets/test.png’)导入，是因为typescript不支持require所以用import导入，下面介绍如何解决：使用awaitimport

vue3项目中怎么使用tinymce May 19, 2023 pm 08:40 PM

tinymce是一个功能齐全的富文本编辑器插件，但在vue中引入tinymce并不像别的Vue富文本插件一样那么顺利，tinymce本身并不适配Vue，还需要引入@tinymce/tinymce-vue，并且它是国外的富文本插件，没有通过中文版本，需要在其官网下载翻译包(可能需要翻墙)。1、安装相关依赖npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下载中文包3.引入皮肤和汉化包在项目public文件夹下新建tinymce文件夹，将下载的

Vue3如何实现刷新页面局部内容 May 26, 2023 pm 05:31 PM

想要实现页面的局部刷新，我们只需要实现局部组件（dom）的重新渲染。在Vue中，想要实现这一效果最简便的方式方法就是使用v-if指令。在Vue2中我们除了使用v-if指令让局部dom的重新渲染，也可以新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter守卫中又跳转回原来的页面。如下图所示，如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载，并展示对应的加载状态。由于Vue3.X中scriptsetup语法中组件内守卫只有o

Vue3怎么解析markdown并实现代码高亮显示 May 20, 2023 pm 04:16 PM

Vue实现博客前端，需要实现markdown的解析，如果有代码则需要实现代码的高亮。Vue的markdown解析库有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked，代码高亮的库选用的是highlight.js。具体实现步骤如下：一、安装依赖库在vue项目下打开命令窗口，并输入以下命令npminstallmarked-save//marked用于将markdown转换成htmlnpmins

Vue3+TS+Vite开发技巧：如何进行跨域请求和网络请求优化 Sep 09, 2023 pm 04:40 PM

Vue3+TS+Vite开发技巧：如何进行跨域请求和网络请求优化引言：在前端开发中，网络请求是非常常见的操作。如何优化网络请求以提高页面加载速度和用户体验是我们开发者需要思考的问题之一。同时，对于一些需要向不同域名发送请求的场景，我们需要解决跨域问题。本文将介绍如何在Vue3+TS+Vite开发环境下进行跨域请求以及网络请求的优化技巧。一、跨域请求解决方案使

Vue3+TS+Vite开发技巧：如何进行前端安全防护 Sep 09, 2023 pm 04:19 PM

Vue3+TS+Vite开发技巧：如何进行前端安全防护随着前端技术的不断发展，越来越多的企业和个人开始使用Vue3+TS+Vite进行前端开发。然而，随之而来的安全风险也引起了人们的关注。在本文中，我们将探讨一些常见的前端安全问题，并分享一些在Vue3+TS+Vite开发过程中如何进行前端安全防护的技巧。输入验证用户的输入往往是前端安全漏洞的主要来源之一。在

Vue3+TS+Vite开发技巧：如何进行数据加密和存储 Sep 10, 2023 pm 04:51 PM

Vue3+TS+Vite开发技巧：如何进行数据加密和存储随着互联网技术的快速发展，数据的安全性和隐私保护变得越来越重要。在Vue3+TS+Vite开发环境下，如何进行数据加密和存储，是每个开发人员都需要面对的问题。本文将介绍一些常用的数据加密和存储的技巧，帮助开发人员提升应用的安全性和用户体验。一、数据加密前端数据加密前端加密是保护数据安全性的重要一环。常用

See all articles

vue3获取ref实例结合ts的InstanceType问题怎么解决