Vue的插件拓展

插件

这里把可以拓展Vue的都统称为【插件】

当写的组件添加install ，将可以用Vue.use()调用成为插件

// 组件定义
class MyPlugin{}
// 插件定义
MyPlugin.install = function (Vue, options) {
    Vue.prototype.$myPlugin = new MyPlugin()
}
// 插件使⽤
Vue.use(MyPlugin)

1. 添加全局方法或属性

通过静态方法挂载

// 1. 添加全局⽅方法或属性
  Vue.myGlobalMethod = function () {
	// 逻辑...
  }
}

2. 创建全局指令、过滤器

// 2. 添加全局资源
Vue.directive('my-directive', {
  bind(el, binding, vnode, oldVnode) {
  	// 逻辑...
  }
  ...
})

3. 混入

目的：分发Vue组件可复用的灵活功能

Vue.mixin 构造函数上混入，即全局混入作用于所有组件，拓展Vue

// 3. 注⼊入组件选项
Vue.mixin({
  created: function () {
  	// 逻辑...  会和组件的created合并
  }
  ...
})

全局混入

// 全局混入 👇
Vue.mixin({
    beforeCreate(){
        // 将会在所有组件初始化时候进入，实现拓展
        // 当前this为 Vue组件实例
        if(this.$options.router){
            // 这里只希望在根组件执行一次
            this.$options.router.init()
        }
    }
})

组件混入

// 组件混入 👇
// 定义⼀一个混⼊入对象
var myMixin = {
    created: function () {
    	this.hello()
    },
    methods: {
    	hello: function () {
    		console.log('hello from mixin!')
    	}
    }
}
// 使用的组件
import mixin from 'mixin'
mixin: ['myMixin']
// 方法使用
this.hello()

4. 添加实例

// 4. 添加实例例⽅方法
Vue.prototype.$myMethod = function (methodOptions) {
	// 逻辑...
}

【多多登场】