vue中的mixins

mixins是一个混合对象数组,混合实例可以包含选项,将在extend将相同的选项合并

 var mixin={
    data:{mixinData:'我是mixin的data'},
    created:function(){
      console.log('这是mixin的created');
    },
    methods:{
      getSum:function(){
        console.log('这是mixin的getSum里面的方法');
      }
    }
  }

  var mixinTwo={
    data:{mixinData:'我是mixinTwo的data'},
    created:function(){
      console.log('这是mixinTwo的created');
    },
    methods:{
      getSum:function(){
        console.log('这是mixinTwo的getSum里面的方法');
      }
    }
  } 

  var vm=new Vue({
    el:'#app',
    data:{mixinData:'我是vue实例的data'},
    created:function(){
      console.log('这是vue实例的created');
    },
    methods:{
      getSum:function(){
        console.log('这是vue实例里面getSum的方法');
      }
    },
    mixins:[mixin,mixinTwo]
  })
  
  //打印结果为:
  这是mixin的created
  这是mixinTwo的created
  这是vue实例的created
  这是vue实例里面getSum的方法

结论:
1.mixins执行的顺序为mixins>mixinTwo>created(vue实例的生命周期钩子);
2.选项中数据属性如data,methods,后面执行的回覆盖前面的,而生命周期钩子都会执行

Vue.extend和Vue.component是为了创建构造器和组件;
mixins和extends是为了拓展组件;
install是开发插件; 总的顺序关系: Vue.extend>Vue.component>extends>mixins

转载于:https://www.cnblogs.com/yxrs/p/9310372.html