Vue复用之Mixins混入
4.1 Mixins 混入
1. 什么是Mixins
当多个组件内部都写了同样的方法，如何将该方法提取出来，减少代码量呢？
Vue实现方式如下：
// define a mixin object var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // define a component that uses this mixin var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // => "hello from mixin!"
2. mixins里定义的和组件内部定义的重复冲突了怎么办
2.1 数据对象是采取合并策略，
组件内部的覆盖mixins里定义的，如下：
var mixin = { data: function () { return { message: 'hello', foo: 'abc' } } } new Vue({ mixins: [mixin], data: function () { return { message: 'goodbye', bar: 'def' } }, created: function () { console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" } } })
2.2 钩子函数采取的是将他们merge进数组
都触发，先触发mixins中的函数，如下
var mixin = { created: function () { console.log('mixin hook called') } } new Vue({ mixins: [mixin], created: function () { console.log('component hook called') } }) // => "mixin hook called" // => "component hook called"
3. 其他
另外你也可以定义全局混入，即每创建一个vue对象，都会merge全局定义的mixins中的对象，慎用vue提供了api，让你甚至可以自定义合并的策略
