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，將被合併爲同一個對象。兩個對象鍵名衝突時，取組件對象的鍵值對。