mixin的使用方法

• 全局使用:Vue.mixin({...})
• 單組件使用:

  {
      ......
      data(){...},
      mixin:[
          {...}, //混入1
          {...}  //混入2
      ],
      mounted(){}
  }
  

開整

1. 如果你想在調(diào)試器中，直接使用 $$vm_popup 或者 $$vm_popup_last 來直接獲取所有的name為popup的引用或者最后一個(gè)創(chuàng)建的name為popup類型組件的引用

       //組件foo定義
       {
           ...
           name:"foo"
       }
   

       //使用組件foo
       {
            ...
            template:`
                 <foo :data="user"></foo>
                 <foo :data="developer"></foo>
             `
       }
   
   
       //此時(shí)在控制臺
       $vm_foo
       //[foo,foo]所有name為foo的實(shí)例的引用
   
       $vm_foo_last
       //foo最后一個(gè)實(shí)例的引用
   

       //實(shí)現(xiàn)
       let mixin = {
           mounted(){
               let name = this.$options.name;
               if(!name) {
                   return;
               }
   
               let namekey = "$$vm_"+name;
               let namekey_last = "$$vm__"+name;
               let pack = window[namekey];
               if(pack) {
                   //是數(shù)組
                   if(pack.length && pack.push && pack.forEach) {
                       window[namekey].push(this)
                   }else{
                       window[namekey] = [pack,this];
                   }
               }else{
                   window[namekey] = this;
               }
               window[namekey_last] = this;
           }
       }
   

2. refsShortCut
   作用:添加對ref節(jié)點(diǎn)的引用，從$refs復(fù)制到組件本身虚缎。
   舉例

   {
       ...
       data(){}
       refsShortCut:"nameInputer,nameInputer2",
       mounted(){
           this.nameInputer === this.$refs.nameInputer;//ture
       }
   }
   

   源碼

     let mixin = {
         ...
         beforeCreate(){
             var m = this;
             //refsShortCut處理
             ($=>{
                 let opt = m.$options.refsShortCut;
                 if(!opt)    return;
                 let nameList = opt.split(",");
                 nameList.forEach(name=>
                     m.$options.computed[name] = $=>m.$refs[name]
                 )
             })()
         },
         ...
     }
   

5. ...