vue 自定義外掛 和 用 Vue.use 使用
官方文件:https://v3.cn.vuejs.org/api/application-api.html#use
安裝 Vue.js 外掛。如果外掛是一個物件,則它必須暴露一個 install
方法。如果外掛本身是一個函式,則它將被視為 install
方法。
該 install
方法將以應用例項作為第一個引數被呼叫。傳給 use
的其他 options
引數將作為後續引數傳入該安裝方法。
當在同一個外掛上多次呼叫此方法時,該外掛將僅安裝一次。
例:
import { createApp } from 'vue' import MyPlugin from './plugins/MyPlugin' const app= createApp({}) app.use(MyPlugin) app.mount('#app')
編寫外掛:【其實就是個 物件 或 方法】
https://v3.cn.vuejs.org/guide/plugins.html#%E7%BC%96%E5%86%99%E6%8F%92%E4%BB%B6
為了更好地理解如何建立自己的 Vue.js 版外掛,我們將建立一個非常簡化的外掛版本,它顯示 i18n
準備好的字串。
每當這個外掛被新增到應用程式中時,如果它是一個物件,就會呼叫 install
方法。如果它是一個 function
,則函式本身將被呼叫。
在這兩種情況下——它都會收到兩個引數:由 Vue 的 createApp
app
物件 和 使用者傳入的選項。 【記住啊 是這2個方法】
讓我們從設定外掛物件開始。建議在單獨的檔案中建立它並將其匯出,如下所示,以保持包含的邏輯和分離的邏輯。
// plugins/i18n.js export default { install: (app, options) => { // Plugin code goes here } }
我們想要一個函式來翻譯整個應用程式可用的鍵,因此我們將使用 app.config.globalProperties
暴露它。 app.config.globalProperties
這玩意其實就是全域性的一個名繫結,別忘記了啊...
該函式將接收一個 key
字串,我們將使用它在使用者提供的選項中查詢轉換後的字串。
// plugins/i18n.js export default { install: (app, options) => { app.config.globalProperties.$translate = key => { return key.split('.').reduce((o, i) => { if (o) return o[i] }, options) } } }
USE使用:
在使用 createApp()
初始化 Vue 應用程式後,你可以通過呼叫 use()
方法將外掛新增到你的應用程式中。
use()
方法有兩個引數。第一個是要安裝的外掛,在這種情況下為 i18nPlugin 【上面編寫的】
。它還會自動阻止你多次使用同一外掛,因此在同一外掛上多次呼叫只會安裝一次該外掛。
第二個引數是可選的,並且取決於每個特定的外掛。
mport { createApp } from 'vue' import Root from './App.vue' import i18nPlugin from './plugins/i18n' const app = createApp(Root)
//下面這個 i18nStrings在這裡充當第二個引數 const i18nStrings = { greetings: { hi: 'Hallo!' } } app.use(i18nPlugin, i18nStrings) app.mount('#app')