vue3【详解】插件 Plugins（含插件的使用场景、编写插件，插件中的 Provide / Inject ）

用于为 Vue 添加全局功能

插件是什么？

插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数：

const myPlugin = {
  install(app, options) {
    // 配置此应用
  }
}

使用场景

• 通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。

• 通过 app.provide() 使一个资源可被注入进整个应用。

• 向 app.config.globalProperties 中添加一些全局实例属性或方法

• 可能上述三种都包含了的功能库 (例如 vue-router)。

编写插件

以 i18n国际化插件 为例

1. 定义插件

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 注入一个全局可用的 $translate() 方法
    app.config.globalProperties.$translate = (key) => {
      // 获取 `options` 对象的深层属性
      // 使用 `key` 作为索引
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

2. 安装插件

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})

3. 使用插件

<h1>{{ $translate('greetings.hello') }}</h1>

最终页面渲染

Bonjour!

原理
$translate 函数接收一个字符串 greetings.hello ，在翻译字典中查找，并返回翻译得到的值。

插件中的 Provide / Inject

可以将插件接收到的 options 参数提供给整个应用，让任何组件都能使用这个翻译字典对象。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.provide('i18n', options)
  }
}

在组件中以 i18n 为 key 注入并访问插件的选项对象

<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')

console.log(i18n.greetings.hello)
</script>