官方文档: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)
const i18nStrings = {
greetings: {
hi: 'Hallo!'
}
}
app.use(i18nPlugin, i18nStrings)
app.mount('#app')
作者:咸瑜