vue3封装自定义全局插件

Posted 2021-08-20 kernel_developer

【vue3】封装自定义全局插件

原vue2方法

main.js

import Vue from \'vue\'
import App from \'./App.vue\'
import router from \'./router\'
import store from \'./store\'
import plugin from \'./···/plugin/index\'

//安装自定义的插件
Vue.use(plugin);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount(\'#app\')

index.js

import Plugin from "./Plugin";

const plugin = {};

/**
 * Vue: 在main.js中Vue.use时会自动传入vue实例作为实参
 *  	同时会自动执行install函数
 */
plugin.install = function(Vue) {
  //1、创建组件构造器
  const pluginConstructor = Vue.extend(Plugin);

  //2、new的方式，根据组件构造器，可以创建出来一个组件对象
  const plugin = new pluginConstructor();

  //3、将组件对象，手动挂载到某一个元素上
  plugin.$mount(document.createElement("div"));

  //4、plugin.$el对应的就是上面挂载的div
  document.body.appendChild(plugin.$el);
  
  //5、定义Vue.$plugin的全局访问
  Vue.prototype.$plugin = plugin;
};

export default plugin; //将plugin导出

plugin.vue(自定义的组件)

<template>
  <div>
  </div>
</template>

<script>
export default {
  name: "Plugin",
}
</script>

<style scoped>
</style>

vue3的思路和vue2相同，只是执行的方法有区别。

vue3方法

区别

- use(plugin)自动调用install函数时
 vue2: 自动传入Vue实例
 vue3: 自动传入App应用实例
- 挂载组件
 vue2: Vue.extend(plugin) + 构造器实例化 + 挂载
 vue3: createApp(plugin) + 挂载
- 定义全局访问
 vue2: Vue.prototype.$plugin
 vue3: app.config.globalProperties.$plugin

main.js

import { createApp } from \'vue\'
import App from \'./App.vue\'
import router from \'./router\'
import store from \'./store\'
import plugin from "···/plugin/index";

createApp(App).use(store).use(router).use(plugin).mount(\'#app\');

index.js

import Plugin from "./Plugin";
import {createApp} from \'vue\'

const plugin = {};

plugin.install = function(app) {
  //1、实例化并绑定组件
  const plugin = createApp(Plugin);
  const instance = plugin.mount(document.createElement("div"));

  //2.将挂载的Node添加到body中
  document.body.appendChild(instance.$el);

  //3、定义全局
  app.config.globalProperties.$plugin = instance;
};

export default plugin;

整体思路相同，可见vue3封装性更强，只需更少的代码。