如何使用 Vue3 和 Typescript 在 Quasar Framework 中定义 ref 方法的类型
Posted
技术标签:
【中文标题】如何使用 Vue3 和 Typescript 在 Quasar Framework 中定义 ref 方法的类型【英文标题】:How define type of ref method in Quasar Framework with Vue3 and Typescript 【发布时间】:2021-10-11 08:17:21 【问题描述】: Quasar Framework v2 测试版 Vue 3 组合 API 打字稿组件模板
<q-btn
@click.stop="showingActionMenu()"
color="grey-7"
round
flat
icon="more_vert"
>
<q-menu
ref="showAction"
auto-close
>
...
</q-menu>
</q-btn>
setup()
...
const showAction = ref<Function | null>(null)
...
)
组件设置
return
...
showAction,
showingActionMenu()
showAction?.value?.show()
,
...
返回的方法显示错误
Property 'show' does not exist on type 'Function'.
【问题讨论】:
【参考方案1】:引用的类型应该是QMenu
,它是从quasar框架导入的:
import QMenu from 'quasar'
...
setup()
...
const showAction = ref<QMenu| null>(null)
...
return
...
showAction,
showingActionMenu()
showAction.value?.show()
,
...
LIVE DEMO
【讨论】:
以上是关于如何使用 Vue3 和 Typescript 在 Quasar Framework 中定义 ref 方法的类型的主要内容,如果未能解决你的问题,请参考以下文章
Jest、Vue3 和 Typescript:如何通过符号模拟注入?
Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源
使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库