混入是一種分發(fā)式組件可復(fù)用功能

分為混入對象 和使用混入對象的組件

// 定義一個(gè)混入對象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定義一個(gè)使用混入對象的組件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

組件在created鉤子執(zhí)行時(shí)執(zhí)行了myMixin里面的函數(shù)，說明混入對象已經(jīng)成功混入組件中，合二為一了。

關(guān)鍵使用方法：

mixins: [myMixin]

注意事項(xiàng)

組件和混入對象含有同名選項(xiàng)
1.數(shù)據(jù)對象會在內(nèi)部進(jìn)行遞歸合并，如果由同名沖突以組件數(shù)據(jù)優(yōu)先

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

可以看到created鉤子函數(shù)輸出的data包含message，foo, bar，其中沖突的message的值是罪行的‘goodbye’

2.同名鉤子函數(shù)將混合成一個(gè)數(shù)組，都將被調(diào)用?；烊雽ο筱^子函數(shù)的優(yōu)先級高于混入的組件的鉤子函數(shù)

3.值為對象的選項(xiàng)，如methods，components,和directives，將被混合為同一個(gè)對象。如果對象鍵名沖突時(shí)，取組件對象的鍵值對