mixins的使用

個人理解mixins就是定義一部分公共的方法或者計算屬性,然後混入到各個元件中使用,方便管理與統一修改

1.在assets資料夾下建立一個js檔案

// 建立一個需要混入的物件 
export const mixinTest1 = {
    created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log('mixinTest1');
        }
    }
};

2. 在元件中使用剛剛建立的混入

import {mixinTest1} from './../assets/js/mixin';
export default {
   mixins:[mixinTest1],
   name: 'hello',
   data () {
       return {
           msg: 'Welcome to Your Vue.js App'
       }
   }
}

這樣就可以直接呼叫到混入物件中的hello方法

3. 最後，全域性混入!

Vue.mixin({
  created: function () {
    var myOption =
 
 this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

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

如果還是不是很瞭解，請移步官網https://cn.vuejs.org/v2/guide/mixins.html