Vue3?中自定義插件的實現(xiàn)方法
最近在錄 TienChin 項目，項目涉及到了 Vue 中插件的定義，因此整了這么一篇文章，手把手教大家在 Vue3 中定義插件，這個技能掌握了，就可以看懂 TienChin 前端代碼了。
1. Vue 插件
在 Vue 中，一些簡單的功能，我們可以直接定義為全局方法，然后掛到 Vue 上就能使用了，例如在 vhr 中，我們將網(wǎng)絡請求方法進行封裝，然后掛到了 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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了關于element ui中el-cascader的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了JavaScript 沙箱探索，沙箱是基于 event bus 形式的通信實現(xiàn)上層的功能，文章的例子選擇接口實現(xiàn)了 web worker 與 quickjs 的 EventEmitter，,需要的朋友可以參考一下2021-10-10
在vue3中,?提供了一個?useAttrs?的方法它接收到的參數(shù)一?prop中可以接收到的數(shù)據(jù)是基本一樣的如果我們想自已寫一個組件,?把?elementPlus?中的期中一個組件封裝一下,這篇文章主要介紹了vue3中的useAttrs和props的區(qū)別,需要的朋友可以參考下2023-09-09
這篇文章主要為大家展示了一個demo，即利用Vue和OpenLayer在地圖上面添加風場效果，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-04-04
這篇文章主要介紹了vuex實現(xiàn)的簡單購物車功能,結合實例形式分析了vuex購物車組件相關商品列表、購物車創(chuàng)建、添加、刪除、清空等相關操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了vue 父組件中調用子組件函數(shù)的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
文章主要介紹了Vue3中的響應式數(shù)據(jù)處理機制,包括ref和reactive函數(shù)的使用,它們的區(qū)別,以及如何使用watch和watchEffect來監(jiān)聽數(shù)據(jù)變化,文章最后提到了Vue3的生命周期鉤子和自定義hooks的概念,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要介紹了vue初嘗試--項目結構的相關知識,需要的朋友可以參考下2018-01-01
本文主要對介紹利用Vue.js 的遞歸組件，實現(xiàn)了一個最基本的樹形菜單。具有很好的參考價值，下面就跟著小編一起來看下吧2016-12-12
詳解vue項目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程
這篇文章主要介紹了將vue的項目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程,主要運用的技術是vue+express+git+百度的應用引擎BAE。需要的朋友可以參考下2018-03-03