vue一些实用mixin收集整理（持续更新...）

mixin的使用方法

---

• 全局使用:Vue.mixin({...})
• 单组件使用:

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

开整

---

1. 如果你想在调试器中，直接使用 $$vm_popup 或者 $$vm_popup_last 来直接获取所有的name为popup的引用或者最后一个创建的name为popup类型组件的引用

       //组件foo定义
       {
           ...
           name:"foo"
       }
   

       //使用组件foo
       {
            ...
            template:`
                 
                 
             `
       }
   
   
       //此时在控制台
       $vm_foo
       //[foo,foo]所有name为foo的实例的引用
   
       $vm_foo_last
       //foo最后一个实例的引用
   

       //实现
       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) {
                   //是数组
                   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节点的引用，从$refs复制到组件本身。
   举例

   {
       ...
       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. ...