【架构师（第三十四篇）】 业务组件库开发之 vue3 的插件系统

---

Vue3 的插件系统

一段代码给 vue 的应用实例添加全局功能。它的格式是一个暴露出 install（） 方法的 Object，或者一个 function。

它没有严格的限制，一般有以下几种功能。

• 添加全局方法或者属性
• 添加全局资源，指令，过滤器（vue3已移除）等。
• 通过全局混入来添加一些组件选项。
• 通过 config.globalProperties 来添加 app 实例方法。

写一个注册全局属性的插件

编写插件代码

代码语言：javascript复制

import type { App } from 'vue';

const plugins = {
  install: (app: App) => {
    app.config.globalProperties.$test = () => {
      console.log('this is a test plugin !');
    };
  },
};
export default plugins;

注册插件

代码语言：javascript复制

import { createApp } from 'vue';
import App from './App.vue';
import testPlugin from './test.plugin';

const app = createApp(App);
app.use(testPlugin);
app.mount('#app');

使用插件方法

代码语言：javascript复制

import { onMounted, getCurrentInstance } from 'vue';

onMounted(() => {
  const vm = getCurrentInstance()
  vm?.appContext.config.globalProperties.$test()
})

写一个注册全局组件的插件

编写插件代码

代码语言：javascript复制

import type { App } from 'vue';
import GlobalComponent from './components/GlobalComponent.vue';

const plugins = {
  install: (app: App) => {
    app.component('global-component', GlobalComponent);
  },
};
export default plugins;

写一个提供 provide 的插件

编写插件代码

代码语言：javascript复制

import type { App } from 'vue';

const plugins = {
  install: (app: App) => {
    app.provide('test', { message: 'test plugin' });
  },
};
export default plugins;

使用插件内容

代码语言：javascript复制

import { inject } from 'vue';
const test = inject('test')
console.log('


	

typescript vue.js 


	




	
 0 人点赞