Vue插件个人理解

123 阅读1分钟

Vue插件

基础理解勿喷!!!! 知识点捡漏

官网解释:插件通常用来为 Vue 添加全局功能 插件在 new Vue() 之前被使用 才能生效

// main.js
import Vue from 'vue'
import plugin from 'plugin.js'

// 插件名称 传递给插件的参数
Vue.use(plugin,[options])

new Vue({
  // render函数 vue 运行时版的渲染模板方法
  render: h => h(App),
}).$mount('#app')
// plugin.js
export default {
    // 必须有的安装函数
    install:function(Vue,[options]){
        // 1. 添加全局方法或 property 
        Vue.myGlobalMethod = function () {}
        
        // 2. 添加全局资源 
        Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { } })
        
        // 3. 注入组件选项
        Vue.mixin({ created: function () { } })
        
        // 4. 添加实例方法 
        Vue.prototype.$myMethod = function (methodOptions) { }
    }
}