Vue3?中自定義插件的實(shí)現(xiàn)方法
最近在錄 TienChin 項(xiàng)目，項(xiàng)目涉及到了 Vue 中插件的定義，因此整了這么一篇文章，手把手教大家在 Vue3 中定義插件，這個(gè)技能掌握了，就可以看懂 TienChin 前端代碼了。
1. Vue 插件
在 Vue 中，一些簡單的功能，我們可以直接定義為全局方法，然后掛到 Vue 上就能使用了，例如在 vhr 中，我們將網(wǎng)絡(luò)請求方法進(jìn)行封裝，然后掛到了 Vue.prototype 上就可以了，類似下面這樣：
import {postRequest} from "./utils/api";
Vue.prototype.postRequest = postRequest;然后在使用的地方，就可以通過 this.postRequest 去使用了。
小伙伴們需要注意，這個(gè)在 Vue3 中有所變化，prototype 變?yōu)榱?config.globalProperties，也就是在 Vue3 中再想要掛載全局方法，應(yīng)該是 const app = createApp(App);app.config.globalProperties.useDict = useDict 這種形式了（具體我將在 TienChin 項(xiàng)目中和大家細(xì)聊）。
這也算是一種插件定義方式，但是這種一般適用于一些工具方法，無法定義一些比較復(fù)雜的插件，復(fù)雜的插件還是得通過 Vue 中提供的插件定義方式來定義。
2. 自定義插件
2.1 基本用法
首先我們新建一個(gè)目錄 plugins 專門用來放我們的插件，然后在這個(gè)目錄中新建一個(gè) index.js 文件用來開發(fā)插件，內(nèi)容如下：
export default {
install: (app, options) => {
console.log("我的第一個(gè)插件")
}
};install 中的方法將會被自動執(zhí)行。
接下來我們就可以在 main.js 中引入我們這個(gè)插件了：
const app = createApp(App); import plugin from './plugins' app.use(plugin);
app.use 就表示引入插件，引入插件之后，插件中的 install 方法就會被自動執(zhí)行。
app.use 方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)就是我們導(dǎo)入的插件 js 對象，第二個(gè)參數(shù)是可選的，大家看到插件定義時(shí)候的 install 方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是 Vue 實(shí)例，這是自動傳入的，第二個(gè)參數(shù) options 則是我們在 app.use 中，通過第二個(gè)參數(shù)傳入進(jìn)來的。當(dāng)然上面這個(gè)例子中松哥沒有傳遞第二個(gè)參數(shù)。
好了，如此配置之后，接下來啟動項(xiàng)目，控制臺就可以看到有日志打出了。
這樣的插件未免過于簡單，接下來我們就給這個(gè)插件加點(diǎn)料。
2.2 加入組件
首先我們定義一個(gè)新的組件，如下：
<template>
<div>
<h1><a rel="external nofollow" rel="external nofollow" rel="external nofollow" >javaboy</a></h1>
</div>
</template>
<script>
export default {
name: "MyBanner"
}
</script>然后我們現(xiàn)在就可以在插件中將這個(gè)組件注冊為一個(gè)全局組件了，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一個(gè)插件")
app.component('my-banner', MyBanner);
}
};首先在插件中導(dǎo)入這個(gè)組件，然后通過 app 進(jìn)行組件注冊，注冊完成后，我們就可以在項(xiàng)目任意位置使用 my-banner 組件了，如下：
<template>
<div>
<my-banner></my-banner>
</div>
</template>最終顯示效果如下：
2.3 加入指令
我們甚至還可以在插件中注冊一個(gè)指令，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一個(gè)插件")
app.component('my-banner', MyBanner);
app.directive("font-size", (el, binding, vnode) => {
var size = 16;
switch (binding.arg) {
case "small":
size = 16;
break;
case "large":
size = 32;
break;
default:
size = 48;
break;
}
el.style.fontSize = size + "px";
});
}
};現(xiàn)在，我們就可以在項(xiàng)目中隨時(shí)隨地去使用這個(gè)指令了，例如在我們剛剛自定義的 my-banner 中使用這個(gè)指令：
<template>
<div>
<h1><a rel="external nofollow" rel="external nofollow" rel="external nofollow" v-font-size:small>javaboy</a></h1>
</div>
</template>
<script>
export default {
name: "MyBanner"
}
</script>我們甚至可以通過 options 將指令中字體的大小動態(tài)的傳進(jìn)來，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一個(gè)插件")
app.component('my-banner', MyBanner);
app.directive("font-size", (el, binding, vnode) => {
var size = 16;
switch (binding.arg) {
case "small":
size = options.small;
break;
case "large":
size = options.large;
break;
default:
size = options.defaut;
break;
}
el.style.fontSize = size + "px";
});
}
};options 是插件注冊時(shí)候傳入的一個(gè) JSON 參數(shù)，small、large 以及 default 分別對應(yīng)的字體多大，要看插件注冊時(shí)傳入的值：
const app = createApp(App);
import plugin from './plugins'
app.use(plugin, {small: 16, large: 32, default: 48});第二個(gè)參數(shù)，大家看，就是 options 參數(shù)的值。
現(xiàn)在大家想想我們平時(shí)用 ElementUI 的時(shí)候，Vue.use 方法，傳入 ElementUI，再傳入一些其他參數(shù)，看了上面這個(gè)例子，ElementUI 引入到底是怎么個(gè)引入法現(xiàn)在大家就明白了吧。
2.4 provide & inject
在插件中，也可以通過 provide 來提供一個(gè)方法，在需要使用該方法的地方，通過 inject 注入方法，然后就可以使用了，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一個(gè)插件")
app.component('my-banner', MyBanner);
app.directive("font-size", (el, binding, vnode) => {
var size = 16;
switch (binding.arg) {
case "small":
size = options.small;
break;
case "large":
size = options.large;
break;
default:
size = options.defaut;
break;
}
el.style.fontSize = size + "px";
});
const clickMe = () => {
console.log("==========clickMe=========")
}
app.provide('clickMe', clickMe);
}
};在需要使用的地方，通過 inject 注入方法后就可以使用了，如下：
<template>
<div>
<h1><a rel="external nofollow" rel="external nofollow" rel="external nofollow" v-font-size:small>javaboy</a></h1>
</div>
</template>
<script>
import {inject} from "vue";
export default {
name: "MyBanner",
mounted() {
const clickMe = inject('clickMe');
clickMe();
}
}
</script>3. 小結(jié)
整體上來說，通過這種方式來自定義插件，能夠?qū)崿F(xiàn)的內(nèi)容比較豐富。如果只是想掛一個(gè)全局方法來用，那么其實(shí)是沒有必要定義插件的。如果只是想掛載一個(gè)全局方法，在 Vue2 中可以按照如下方式使用：
Vue.prototype.postRequest = postRequest;
在 Vue3 中則可以通過如下方式：
app.config.globalProperties.useDict = useDict
到此這篇關(guān)于Vue3 中自定義插件的文章就介紹到這了,更多相關(guān)Vue自定義插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js實(shí)戰(zhàn)之組件之間的數(shù)據(jù)傳遞
這篇文章主要介紹了Vue.js實(shí)戰(zhàn)之組件之間的數(shù)據(jù)傳遞的相關(guān)資料，文中通過示例代碼和圖文介紹的非常詳細(xì)，對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
本篇文章主要介紹了用vuex寫了一個(gè)購物車H5頁面的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了Vue中的反向代理，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue實(shí)現(xiàn)長圖垂直居上 vue實(shí)現(xiàn)短圖垂直居中
這篇文章主要為大家詳細(xì)介紹了vue彈性布局實(shí)現(xiàn)長圖垂直居上，vue實(shí)現(xiàn)短圖垂直居中，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
在項(xiàng)目開發(fā)中,有兩個(gè)功能特別類似,如果單獨(dú)實(shí)現(xiàn),會有很多重復(fù)的代碼，這時(shí)候就會用到邏輯復(fù)用，本文主要介紹了vue3?邏輯復(fù)用的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下2024-02-02
vue網(wǎng)絡(luò)請求方案原生網(wǎng)絡(luò)請求和js網(wǎng)絡(luò)請求庫
這篇文章主要為大家介紹了網(wǎng)絡(luò)請求方案原生網(wǎng)絡(luò)請求和js網(wǎng)絡(luò)請求庫的過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-11-11
這篇文章主要介紹了用Vue.js遞歸組件構(gòu)建一個(gè)可折疊的樹形菜單的教學(xué)內(nèi)容，有興趣的朋友跟著學(xué)習(xí)下。2017-12-12
這篇文章主要介紹了element-ui中table表格的折疊和隱藏方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
說說Vue.js中的functional函數(shù)化組件的使用
這篇文章主要介紹了說說Vue.js中的functional函數(shù)化組件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了詳解vue配置請求多個(gè)服務(wù)端解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03