【vue3】封装⾃定义全局插件【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 = d(Plugin);
//2、new的⽅式，根据组件构造器，可以创建出来⼀个组件对象
const plugin = new pluginConstructor();
//3、将组件对象，⼿动挂载到某⼀个元素上
plugin.$ateElement("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: d(plugin) + 构造器实例化 + 挂载
vue3: createApp(plugin) + 挂载
- 定义全局访问
vue2: Vue.prototype.$plugin
vue3: fig.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 = ateElement("div"));
//2.将挂载的Node添加到body中
document.body.appendChild(instance.$el);
//3、定义全局
};
export default plugin;
vuejs流程图插件整体思路相同，可见vue3封装性更强，只需更少的代码。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。