Vue2 与 Vue3 自定义插件实现
- 在 Vue2 中，插件是一个包含 install 方法的对象，接收 Vue 构造函数作为第一个参数，以及插件选项作为第二个参数
// myPlugin.jsconstMyPlugin={install(Vue,options){// 1. 添加全局方法或属性Vue.myGlobalMethod=function(){// 逻辑...}// 2. 添加自定义指令Vue.directive('my-directive',{bind(el,binding,vnode,oldVnode){// 逻辑...}// ...})// 3. 注入组件选项Vue.mixin({created(){// 逻辑...}// ...})// 4. 添加实例方法Vue.prototype.$myMethod=function(methodOptions){// 逻辑...}}}exportdefaultMyPlugin
importVuefrom'vue'importAppfrom'./App.vue'importMyPluginfrom'./myPlugin'Vue.use(MyPlugin,{/* 选项 */})newVue({render:h=>h(App),}).$mount('#app')
- 在 Vue3 中，插件是一个包含 install 方法的对象，接收 Vue 应用实例作为第一个参数，以及插件选项作为第二个参数
constMyPlugin={install(app,options){// 1. 添加全局属性app.config.globalProperties.$myProperty='value'// 2. 添加全局自定义指令app.directive('my-directive',{mounted(el,binding){// 逻辑...}// ...})// 3. 注入依赖app.provide('myInjection','injection value')// 4. 添加全局方法app.config.globalProperties.$myMethod=function(){// 逻辑...}}}exportdefaultMyPlugin
import{createApp}from'vue'importAppfrom'./App.vue'importMyPluginfrom'./myPlugin'constapp=createApp(App)app.use(MyPlugin,{/* 选项 */})app.mount('#app')
