v3+ts 中定義全局方法

在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  setup>
import { getCurrentInstance } from 'vue'
 const { proxy } = getCurrentInstance() as any;
 
 const handleClick= (item: any)=>{
     proxy.$lookGoods(item)
 }
</script>