vue的混入mixins

1>使用

1、在您的Vue應用程序內部，我們將創建一個名爲mixins的文件夾，並且新建文件命名爲nomeMixins.js

export default {
 	created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

2、在.vue組件中引入Mixin的js文件nomeMixins.js

<script>
  import nomeMixins from '&&/mixins/nomeMixins'

  export default {
    mixins: [nomeMixins],
    data () {
      return {}
    },
    created () {
     	// => "hello from mixin!"
    }
  }
</script>

2>同名選項合併規則

當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行“合併”。

1>數據data對象合併，組件優先

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>同名鉤子函數合併，混入對象先執行，組件對象後執行

var mixin = {
  created: function () {
    console.log('混入對象的鉤子被調用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('組件鉤子被調用')
  }
})

// => "混入對象的鉤子被調用"
// => "組件鉤子被調用"

3>爲methods、components 和 directives的同名函數或者組件時，組件覆蓋混入值

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

3>全局混入

混入也可以進行全局註冊。使用時格外小心！一旦使用全局混入，它將影響每一個之後創建的 Vue 實例。使用恰當時，這可以用來爲自定義選項注入處理邏輯。
請謹慎使用全局混入，因爲它會影響每個單獨創建的 Vue 實例 (包括第三方組件)。大多數情況下，只應當應用於自定義選項，就像上面示例一樣。推薦將其作爲插件發佈，以避免重複應用混入。

// 爲自定義的選項 'myOption' 注入一個處理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"