vue中mixin (混入) 的学习

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 

index.vue

<template>
  <div class="index">
    {{msg}}  ----  {{msgMixin}}
  </div>
</template>

<script>
// 引入
import indexMinxin from './index-mixin.js'
export default {
  name: 'index',
  // 注册
  mixins: [indexMinxin],
  data () {
    return {
      msg: 'index.vue'
    }
  },
  created () {
    console.log('index.vue')
    this.fn()
  },
  methods: {
    fn () {
      console.log('index.vue-methods')
    }
  }
}
</script>

<style scoped>

</style>

 

index-mixin.js

export default {
  data () {
    return {
      msgMixin: 'index-mixin.js'
    }
  },
  created () {
    console.log('index-mixin.js')
  },
  methods: {
    fn () {
      console.log('index-mixin.js-methods')
    }
  }
}

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

如图：

 

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。