建站
咨詢
售后
建站咨詢
新聞中心
插件是自包含的代碼，通常向 Vue 添加全局級功能。它可以是公開 install() 方法的 object，也可以是 function
成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站建設(shè)、成都做網(wǎng)站與策劃設(shè)計,黑山網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:黑山等地區(qū)。黑山做網(wǎng)站價格咨詢:13518219792
插件的功能范圍沒有嚴(yán)格的限制——一般有下面幾種：
- 添加全局方法或者 property。如：vue-custom-element
- 添加全局資源：指令/過濾器/過渡等。如：vue-touch
- 通過全局混入來添加一些組件選項。如：vue-router
- 添加全局實例方法，通過把它們添加到
config.globalProperties上實現(xiàn)。 - 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如：vue-router
#編寫插件
為了更好地理解如何創(chuàng)建自己的 Vue.js 版插件，我們將創(chuàng)建一個非常簡化的插件版本，它顯示 i18n 準(zhǔn)備好的字符串。
每當(dāng)這個插件被添加到應(yīng)用程序中時，如果它是一個對象，就會調(diào)用 install 方法。如果它是一個 function，則函數(shù)本身將被調(diào)用。在這兩種情況下——它都會收到兩個參數(shù)：由 Vue 的 createApp 生成的 app 對象和用戶傳入的選項。
讓我們從設(shè)置插件對象開始。建議在單獨的文件中創(chuàng)建它并將其導(dǎo)出，如下所示，以保持包含的邏輯和分離的邏輯。
// plugins/i18n.js
export default {
install: (app, options) => {
// Plugin code goes here
}
} 我們想要一個函數(shù)來翻譯整個應(yīng)用程序可用的鍵，因此我們將使用 app.config.globalProperties 暴露它。
該函數(shù)將接收一個 key 字符串，我們將使用它在用戶提供的選項中查找轉(zhuǎn)換后的字符串。
// plugins/i18n.js
export default {
install: (app, options) => {
app.config.globalProperties.$translate = key => {
return key.split('.').reduce((o, i) => {
if (o) return o[i]
}, i18n)
}
}
} 我們假設(shè)用戶使用插件時，將在 options 參數(shù)中傳遞一個包含翻譯后的鍵的對象。我們的 $translate 函數(shù)將使用諸如 greetings.hello 之類的字符串，查看用戶提供的配置內(nèi)部并返回轉(zhuǎn)換后的值-在這種情況下為 Bonjour!。
例如：
greetings: {
hello: 'Bonjour!'
} 插件還允許我們使用 inject 為插件的用戶提供功能或 attribute。例如，我們可以允許應(yīng)用程序訪問 options 參數(shù)以能夠使用翻譯對象。
// plugins/i18n.js
export default {
install: (app, options) => {
app.config.globalProperties.$translate = key => {
return key.split('.').reduce((o, i) => {
if (o) return o[i]
}, i18n)
}
app.provide('i18n', options)
}
} 插件用戶現(xiàn)在可以將 inject[in18] 到他們的組件并訪問該對象。
另外，由于我們可以訪問 app 對象，因此插件可以使用所有其他功能，例如使用 mixin 和 directive。要了解有關(guān) createApp 和應(yīng)用程序?qū)嵗母嘈畔ⅲ埐榭?Application API 文檔。
// plugins/i18n.js
export default {
install: (app, options) => {
app.config.globalProperties.$translate = (key) => {
return key.split('.')
.reduce((o, i) => { if (o) return o[i] }, i18n)
}
app.provide('i18n', options)
app.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// some logic ...
}
...
})
app.mixin({
created() {
// some logic ...
}
...
})
}
}#使用插件
在使用 createApp() 初始化 Vue 應(yīng)用程序后，你可以通過調(diào)用 use() 方法將插件添加到你的應(yīng)用程序中。
我們將使用在編寫插件部分中創(chuàng)建的 i18nPlugin 進(jìn)行演示。
use() 方法有兩個參數(shù)。第一個是要安裝的插件，在這種情況下為 i18nPlugin。
它還會自動阻止你多次使用同一插件，因此在同一插件上多次調(diào)用只會安裝一次該插件。
第二個參數(shù)是可選的，并且取決于每個特定的插件。在演示 i18nPlugin 的情況下，它是帶有轉(zhuǎn)換后的字符串的對象。
INFO
如果你使用的是第三方插件 (例如 Vuex 或 Vue Router)，請始終查看文檔以了解特定插件期望作為第二個參數(shù)接收的內(nèi)容。
import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'
const app = createApp(Root)
const i18nStrings = {
greetings: {
hi: 'Hallo!'
}
}
app.use(i18nPlugin, i18nStrings)
app.mount('#app')awesome-vue 集合了大量由社區(qū)貢獻(xiàn)的插件和庫。
新聞名稱：創(chuàng)新互聯(lián)VUE3教程：Vue3.0插件
文章起源：http://m.5511xx.com/article/coehsdc.html
