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