Vue 插件 & 全局属性或方法

一、插件的定义

插件 (Plugins) 是对 Vue 全局功能的增强或补充。

二、插件的使用

1、编写插件

插件是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。编写插件如下：

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

2、插件注册

插件可通过 app.use() 的方式进行全局注册：

main.js

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* 可选的选项 */
})

三、插件的应用

这里以组件库的全局注册为例，在每个组件下单独导出组件 Plugin：

components/button/index.ts

import { App, Plugin } from 'vue';
import Button from './button.vue';

export const ButtonPlugin: Plugin = {
  install(app: App) {
    app.component('i-button', Button);
  },
};

export { Button };

再将所有组件 Plugin 整合为一个插件：

components/index.ts

import { App, Plugin } from 'vue'
import { ButtonPlugin } from './button'
import { IconPlugin } from './icon'
// ...

const IDesignPlugin: Plugin = {
  install(app: App) {
    ButtonPlugin.install?.(app)
    IconPlugin.install?.(app)
    // ...
  }
}

export * from './button'
export * from './icon'
// ...

export default IDesignPlugin

对整合后的组件库以插件的方式进行全局注册：

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import iDesign from '../components'

createApp(App).use(iDesign).mount('#app')

四、全局实例属性或方法

可通过 app.config.globalProperties 注册能够被应用内所有组件实例访问到的全局属性或方法。

注册：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 可以通过注册插件的方式
const myPlugin = {
  install(app) {
    app.config.globalProperties.xx = '123';
  },
};
app.use(myPlugin);

// 也可以直接注册
// app.config.globalProperties.xx = '123';

app.mount('#app');

在任意组件模板上可直接使用该全局属性或方法，如果想在 <script setup> 中也访问到，需要使用 getCurrentInstance：

<template>
  {{ xx }}
</template>

<script setup>
import { getCurrentInstance } from 'vue';

const app = getCurrentInstance().appContext.app;
console.log(app.config.globalProperties.xx);
</script>