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)文章
vue + el-form 實現(xiàn)的多層循環(huán)表單驗證
這篇文章主要介紹了vue + el-form 實現(xiàn)的多層循環(huán)表單驗證，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下。2020-11-11
Computed 計算屬性是 Vue 中常用的一個功能，本篇文章主要介紹了Vue Computed 計算屬性原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
本篇文章主要介紹了將 vue 生成的 js 上傳到七牛的實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細介紹了vue3實現(xiàn)關(guān)鍵字高亮指令的相關(guān)資料,w文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2023-11-11
el-table 選擇框根據(jù)條件設(shè)置某項不可選中的操作代碼
這篇文章主要介紹了el-table 選擇框根據(jù)條件設(shè)置某項不可選中的操作代碼,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
我們在做項目經(jīng)常會遇到組件功能不能滿足業(yè)務(wù)需求的時候,這時候需要在原有的組件上進行二次封裝,下面這篇文章主要給大家介紹了關(guān)于Vue組件二次封裝的一些實用技巧,需要的朋友可以參考下2022-04-04
SpringBoot+Vue項目線上買菜系統(tǒng)源碼展示
本線上買菜系統(tǒng)采用的數(shù)據(jù)庫是Mysql，使用springboot框架開發(fā)。在設(shè)計過程中，充分保證了系統(tǒng)代碼的良好可讀性、實用性、易擴展性、通用性、便于后期維護、操作方便以及頁面簡潔等特點,需要的朋友可以參考下2022-08-08
Vue.js教程之a(chǎn)xios與網(wǎng)絡(luò)傳輸?shù)膶W(xué)習(xí)實踐
這篇文章主要給大家介紹了Vue.js之a(chǎn)xios與網(wǎng)絡(luò)傳輸?shù)南嚓P(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟隨小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-04-04
本文主要介紹了vue項目打包時自動更新版本號的實現(xiàn)方法,通過在根目錄下創(chuàng)建autoVersion.js腳本文件,頁面獲取版本號時直接使用,修改package.json配置,感興趣的可以了解一下2025-02-02
我們對Vue中data數(shù)據(jù)的修改會導(dǎo)致界面對應(yīng)的響應(yīng)變化，而通過nextTick方法，可以在傳入nextTick的回調(diào)函數(shù)中獲取到變化后的DOM，講起來可能還是有點夢幻，下面我們直接使用nextTick體驗一下效果2022-08-08