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