mixins介紹

• 在元件中使用mixins，就是把mixins中的function都混入元件中，給元件去調用。
  到底是誰混進來了呢? 兇手就是mixins!
• 在mixins裡寫的function是可被復用的，讓每個component共用function的功能。
• mixins 就是為了製作共用的功能(compute/methods/watch)
• 如果混入後，和元件function名稱相同將會被覆蓋，以元件內的function為主。

基本用法(Basic usage)

// add.js
export default {
  data() {
    return {
      text: 'In mixin',
    };
  },
  methods: {
    getNameText(name) {
      return name + this.text;
    },
  },
};

<div id="app">
	輸入姓名：<input type="text" v-model="msg">
	<input type="button" id="add" @click="addName()" :value="btnName">
	{{ mixinText }}
<div>

import mixin from './add.js';
let app = new Vue({
  mixins: [mixin],
  el: '#app',
  data: {
    msg: 'Name',
    btnName: '新增',
    mixinText: '',
  },
  methods: {
    addName() {
      this.mixinText = this.getNameText(this.msg);
    },
  },
});

render

Name In mixin

在Vue Instance 使用mixins - add.js
當在<input>上輸入姓名按下新增後，在addName()中會去call mixins中的function getNameText()

選項合併(Option Merging)

let mixin = {
  data: function () {
    return {
      text: 'In mixin',
    };
  },
  methods: {
    getNameText(name) {
      return name + this.text;
    },
  },
};

let app = new Vue({
  mixins: [mixin],
  el: '#app',
  data: {
    msg: 'Name',
    btnName: '新增',
    mixinText: '',
  },
  methods: {
    addName() {
      this.mixinText = this.getNameText(this.msg);
    },
  },
});

用mixin建立一個Instance，在component直接拿來用，變數名稱並需要跟mixins包含名稱相同。
執行addName()會呼叫mixin變數的getNameText()，賦予mixinText變數值。

元件、mixins定義相同的function?

var mixin = {
  methods: {
    showLog(){
      console.log('use mixin')
    }
  }
}

let app = new Vue({
  mixins: [mixin],
  el: '#app',
  data: {
  },
  methods: {
    showLog(){
        console.log('use app')
      }
   }
})

app.showLog()

render

"use app"

如文章開頭提到的component與mixins的function或變數名稱相同，會先以component為主。

但是如果衝突的是 lifecycle 的 hooks (e.g, created, watch, computed…)，那 mixin 和 component 的動作會被塞進一個陣列一一執行，mixin 的優先。

另外需注意的是，當同時載入兩個mixins，會依照載入順序。
e.g.
mixin1先載入再來才是mixin2，所以當 mixin1 與 mixin2 有相同的 function時，後載入蓋前載入，mixin2 蓋過 mixin1。

全域mixins

Vue.mixin({
  data(){
    return {
      text: 'In mixin'
    }
  },
  methods: {
    getNameText(name){
      return name + this.text
    }
  }
})

let app = new Vue({
  el: '#app',
  data: {
    msg: 'Name',
    btnName: '新增',
    mixinText: '',
  },
  methods: {
    addName() {
      this.mixinText = this.getNameText(this.msg);
    },
  },
});

將mixins設定全域，在每個元件可以直接使用，不需在載入mixins。
但不建議設定為全域，相依性高，也不好tracy code，要謹慎使用。

Resource
用 Mixin 來共用方法
利用 Mixins 重複使用組件的方法