mixin

官方链接
混入的将在组件创建前就被调用，组件中的同名将会覆盖混入的

选项合并(推荐)

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" }
  }
})

全局混入

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})

案例

案例一

// 混入一个function 专门用来处理每页的 headers信息
Vue.mixin({
    methods: {
        $seo(title, content, payload=[]) {
            return {
                title,
                meta: [
                    {
                        hid: 'descrition',
                        name: "keywords",
                        content
                    },
                    ...payload
                ]
            }
        }
    }
})

在每个页面使用时，都可以直接当成本组件的methods中的方法

案例二

直接混入一个修改vue模板语法的mixin
Vue.mixin({
delimiters: [’{%’, ‘%}’],
})