vue全局方法plugins/utils的實(shí)現(xiàn)示例
更新時(shí)間：2024年07月02日 09:24:04 作者：庫庫的寫代碼
很多時(shí)候我們會(huì)在全局調(diào)用一些方法,本文主要介紹了vue全局方法plugins/utils的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下
一、在src目錄下創(chuàng)建一個(gè)plugins文件夾
test.ts文件存放創(chuàng)建的方法，index.ts用于接收所有自定義方法進(jìn)行統(tǒng)一處理
二、編寫自定義方法
// test.ts文件
export default {
handleTest(val1: number, val2: number) {
// 只是一個(gè)求和的方法
return val1 + val2;
},
};三、引入到index.ts
vue對(duì)插件的安裝可以分為兩種方式
方式一：直接使用函數(shù)，在main.js中調(diào)用
//index.ts文件
import test from "./test";
export default function (app: any) {
app.config.globalProperties.handleTest = test.handleTest;
}方式二：使用對(duì)象，則必須給對(duì)象一個(gè)install屬性
import test from "./test";
export default {
install: function (app: any) {
app.config.globalProperties.handleTest = test.handleTest;
},
};四、引入main.ts進(jìn)行注冊(cè)
//main.ts文件 import pluginsfrom "./plugins"; app.use(plugins); //使用此方法會(huì)執(zhí)行方法的函數(shù)或?qū)ο蟮膇nstall方法
五、全局方法的使用
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;
console.log(proxy.handleTest(4, 3), "@@@@###");
六、效果展示
到此這篇關(guān)于vue全局方法plugins/utils的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue全局方法plugins/utils內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯詳解
el-tree-select組件是el-tree和el-select的結(jié)合體,他們的原始屬性未被更改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue中的config目錄下index.js解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了解決vue字符串換行問題(絕對(duì)管用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)手機(jī)計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
本文詳細(xì)介紹了如何在計(jì)算機(jī)上安裝和配置Node.js,包括下載Node.js,驗(yàn)證安裝成功,配置npm的全局模塊目錄和緩存目錄,設(shè)置環(huán)境變量,配置npm鏡像,安裝Vue.js等步驟,通過這些指導(dǎo),你可以在IDEA上成功創(chuàng)建和運(yùn)行Vue項(xiàng)目2024-10-10
這篇文章主要介紹了vue百度地圖 + 定位的詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
淺談vue項(xiàng)目4rs vue-router上線后history模式遇到的坑
今天小編就為大家分享一篇淺談vue項(xiàng)目4rs vue-router上線后history模式遇到的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue組件通信方式(父?jìng)髯印⒆觽鞲?、兄弟通?，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue如何實(shí)現(xiàn)Json格式數(shù)據(jù)展示
這篇文章主要介紹了vue如何實(shí)現(xiàn)Json格式數(shù)據(jù)展示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vue-aplayer插件時(shí)出現(xiàn)的問題的解決
這篇文章主要介紹了使用vue-aplayer插件時(shí)出現(xiàn)的問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03