Vue3插件系统的使用

1,094 阅读2分钟

在vue中,插件是为了给应用实例添加全局功能。插件通常是一个object暴露出一个install方法,或者一个function。一般来说有以下几种用途:

  • 添加全局的方法或者属性
  • 添加全局资源:指令、过滤器等
  • 通过全局混入来添加一些组件选项
  • 通过config.globalProperties来添加应用实例方法

以代码示例说明,我们新建一个test.plugin.ts,这是我们的插件源码: carbon (11).png 插件首先引入了vue的应用实例类型App,然后默认暴露了plugins对象。我们在该对象中注册了全局的属性方法、组件、以及全局的数据共享。

此时我们需要在入口文件man.ts引入我们的插件:

carbon (12).png

注意:在vue3中我们传入 createApp 的对象实际上是一个组件,每个应用都需要一个“根组件”,其他组件将作为其子组件。这里我们使用的是App.vue这个组件作为它的根组件,然后通过应用的use方法使用了插件。

插件的使用及其简单,我们可以在组件的生命周期中调用全局注册的方法:

carbon (13).png 或者使用inject方法获取provide提供的全局数据:

carbon (14).png

我们日常使用的ui组件库实际也是应用了插件系统,这些组件库通常有两种使用方式:

  • 单组件导入
  • 所有组件全部导入

单组件导入原理

所有的组件都会在其根目录下建立一个index.ts文件,在这个文件当中,我们导入了实际的组件,并为该组件提供了install方法,最后将处理后的代码默认导出:

carbon (15).png

使用方式:

carbon (16).png

所有组件全部导入

  1. 建立index.ts文件作为组件的统一入口文件
  2. 将所有组件导入,作为一个数组,创建一个install函数,循环调用app.component
  3. 默认导出一个插件(install函数)

carbon (17).png 总结:vue的插件系统实际是提供了install方法作为统一的组册方式,vue应用实例会在使用这些插件或者组件时(app.use和app.components),调用其提供的install方法,然后为应用实例挂载对应的功能。