vue项目开发中使用mixins

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