1.mixi混入

1.1定义

混入提供了一个非常灵活的方式，来分发vue组件中可复用的功能。可以混如组件任意选项。 混入时，会把对应定义所有选项混入对应的新对象实例里。

• 注意：
• 定义的是一个对象
• 如果同时定义data的相同子项，优先父页面，mixi失效。
• 如果同时相同选项方法，以数组形式，mixi优先调用再调用父页面。
• 如果同时相同自定义方法，优先父页面，mixi失效。
• 很强大，可以正常调用this，访问父页实例面信息

// 定义一个混入对象 
var myMixin = { 
    created: function () { 
        this.hello() 
    },
    methods: { 
        hello: function () { 
            console.log('hello from mixin!') 
        } 
    } 
}
// 定义一个使用混入对象的组件 
Vue.component('comp', { 
    mixins: [myMixin] 
})

2.插件

2.1定义

为Vue添加全局功能

1. 添加全局方法或者属性。
2. 添加全局资源：指令/过滤器/过渡等。
3. 通过全局混入来添加一些组件选项。
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。

2.2.声明

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。

MyPlugin.install = function (Vue, options) { 
// 1. 添加全局方法或属性 
Vue.myGlobalMethod = function () {} 
// 2. 添加全局资源 
Vue.directive('my-directive', {}) 
// 3. 注入组件选项  由于可以使用this，功能很强大，可以直接操作实例
Vue.mixin({ 
    created: function () { 
        // 逻辑... 
    }
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {}

2.3使用

//使用1
const MyPlugin = { 
    install (Vue, options) { 
        Vue.component('mysection', {...}) 
    } 
}
if (typeof window !== 'undefined' && window.Vue) { 
    window.Vue.use(MyPlugin) 
}
//使用2
Vue.use(MyPlugin)