v3+ts 中定义全局方法

KeroroLX

于 2023-02-15 14:31:51 发布

阅读量488

点赞数

CC 4.0 BY-SA版权

分类专栏： vue笔记 typescript 文章标签： vue3 ts

本文链接：https://blog.youkuaiyun.com/github_38928905/article/details/129042949

vue笔记同时被 2 个专栏收录

35 篇文章

订阅专栏

typescript

1 篇文章

订阅专栏

文章介绍了如何在Vue应用中创建一个名为lookGoods的方法，将其全局化以便在组件内直接调用。首先在util.js中导出方法，然后在main.ts中导入并添加到全局属性。为了处理类型检查问题，创建了global.d.ts来扩展Vue的运行时核心类型。在组件内部，可以通过模板直接调用或在setup脚本中使用getCurrentInstance访问该方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在util.js定义方法

export function lookGoods(item: object | any){
    ...
}

main.ts

import { lookGoods } from './util'
const app = createApp(App)
// 查看商品
app.config.globalProperties.$lookGoods = lookGoods

扩展类型，否则打包报错。
types文件夹下新建 global.d.ts

import Vue from 'vue'
declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $lookGoods:any
    }
}

组件中使用
1）直接使用

<div @click="$lookGoods(goodsInfo)">教科书</div>

2)script 中使用

<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
 const { proxy } = getCurrentInstance() as any;
 
 const handleClick= (item: any)=>{
     proxy.$lookGoods(item)
 }
</script>