mixin使用场景

mixins 将两个的对象的混合为一个数组，彼此都可以被调用,下面为演示代码及其结果

ps:当对象键值对 键名冲突时，保留非mixin对象的键值对

<div id="app"></div>  
       <script>  
           var myMixin={  
               template:'<h1>holle mixin</h1>',  
               methods:{  
                   hello:function(){  
                       console.log('this is mixin')  
                   },  
                   say:function(){  
                       console.log('I am mixin')  
                   }  
               }  
           };  
  
           var Component=Vue.extend({  
               mixins:[myMixin],  
               methods:{  
                   lsit:function(){  
                       console.log('I am lsit')  
                   },  
                   say:function(){  
                        console.log('I am not  mixin say')  
                   }  
               }  
  
           });  
           var newcom=new Component().$mount('#app')  
           newcom.hello();  
           newcom.lsit();  
           newcom.say();  
       </script>  

全局的混合

<div id="app"></div>  
       <script>  
           Vue.mixin({  
               created:function(){  
                   this.hello()  
               },  
               methods:{  
                   hello:function(){  
                       console.log('this is mixin')  
                   },  
                   say:function(){  
                      console.log('I am mixin')  
                   }  
               }  
           });  
  
           var app=new Vue({  
               el:"#app",  
               methods:{  
                   lsit:function(){  
                       console.log('I am lsit')  
                   },  
                   say:function(){  
                        console.log('I am mixin say')  
                   }  
               }  
  
           });  
  
           app.hello();  
           app.lsit();  
           app.say();  
  
       </script>  

比如项目中多处的view层使用到下拉刷新以及自动加载功能，处理这些相同的逻辑，每一个view层都要写一遍是浪费生命的。这种情况就很适合使用mixin。

转载于:https://www.cnblogs.com/jeremy123/p/7575978.html