1. 程式人生 > 其它 >vue 自定義外掛 和 用 Vue.use 使用

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')