插件

阅读: 4626 评论：0

插件是自包含的代码，通常用于向 Vue 添加全局级功能。它可以是公开 install() 方法的 object，也可以是 function

插件的功能范围没有严格的限制——一般有下面几种用法：

添加全局方法或者属性。如：vue-custom-element
添加全局资源：指令/过渡等。如：vue-touch
通过全局 mixin 来添加一些组件选项。(如vue-router)
添加全局实例方法，通过把它们添加到 config.globalProperties 上实现。
作为一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

编写插件

下面我们以编写一个用来显示 i18n 字符串的插件作为例子。

每当一个插件被导入到页面app时，如果它是一个对象，就会调用它的 install 方法。如果它是一个 function，则函数本身将被调用。在这两种情况下——它都会收到两个参数：由 Vue 的 createApp 生成的 app 对象和用户传入的选项。

用法一：提供全局函数

让我们从设置插件对象开始。建议在单独的JS文件中创建它并将其导入到需要的地方。如下所示，以保持包含的逻辑和分离的逻辑。

// plugins/i18n.js       插件一般都放在plugins目录中

export default {
  install: (app, options) => {
    // 具体的插件代码
  }
}

我们的思路是提供一个全局的翻译函数来实现功能，因此我们将使用 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)
    }
  }
}

我们假设用户使用插件时，将在 options 参数中传递一个包含翻译后的键的对象。我们的 $translate 函数将使用诸如 greetings.hello 之类的字符串，查看用户提供的配置内部并返回转换后的值（假设在这种情况下为 Bonjour!）。

例如：

greetings: {
  hello: 'Bonjour!'
}

用法二：provide/inject

插件还允许我们使用 inject 为插件的用户提供功能或属性。例如，我们可以允许应用程序访问 options 参数以能够使用翻译对象。

// 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)
    }

    app.provide('i18n', options)  // 看这里
  }
}

插件用户现在可以将 inject[i18n] 注入到他们的组件并访问该对象。

用法三：插入全局指令和全局Mixin

另外，由于我们可以访问 app 对象，因此插件可以使用所有app的其他功能，例如使用 mixin 和 directive。

// 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)
    }

    app.provide('i18n', options)

    app.directive('my-directive', {
      mounted (el, binding, vnode, oldVnode) {
        // some logic ...
      }
      ...
    })

    app.mixin({
      created() {
        // some logic ...
      }
      ...
    })
  }
}

使用插件:use()

在使用 createApp() 初始化 Vue 应用程序后，通过调用 use() 方法将插件添加到你的应用程序中。

use() 方法有两个参数。

第一个是要安装的插件的名字。Vue会自动阻止你多次使用同一插件，因此在同一插件上多次调用只会安装一次该插件。

第二个参数是可选的，并且取决于每个特定的插件，通常是插件本身的配置参数。

参考下面的例子：

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 集合了大量由社区贡献的插件和库，每一个Vue爱好者都应该多逛逛这里。

自定义指令渲染函数

评论总数： 0

点击登录后方可评论