VUE项目开发中使用mixins

一、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、如果组件中定义的方法与混入对象中的方法/属性一样,组件中的优先级大于混入对象中的(方法会调用多次)

• 4、混入对象中可以定义抽象方法,使用混入的组件必须重写该方法

  ...
  methods: {
      handlePlaylist() {
          throw new Error('component must implement handlePlaylist method')
      }
  }
  ...