如何使用 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组件库

Vue3-JavaScript如何使用vue3创建一个基于webstorm开发自动提示和自动格式化代码规则的工程!

Vue3+TypeScript完整项目上手教程

使用vue3+ typeScript 开发小程序