vue Render scopedSlots

render 中 slot 的一般默认使用方式如下：

this.$slots.default 对用 template的<slot>的使用没有name 。

想使用多个slot 的话。需要对slot命名唯一。使用this.$slots.name 在render中添加多个slot。

[html] view plain copy
 
  1. <body>  
  2.     <div class="" id="app">  
  3.     <myslot>  
  4.         <div>this is slot</div>  
  5.     </myslot>  
  6.   
  7.   
  8.     </div>  
  9.     <script>  
  10.     Vue.component('myslot',{  
  11.         render:function(createElement){  
  12.              var he=createElement('div',{domProps:{innerHTML:'this child div'}});  
  13.             return createElement('div',[he,this.$slots.default])  
  14.             }  
  15.     });  
  16.     var app=new Vue({  
  17.         el:'#app'  
  18.     })  
  19.     </script>  
  20.     </body>   

多个slot的使用

[html] view plain copy
 
  1. <body>  
  2.     <div class="" id="app">  
  3.     <myslot>  
  4.         <div slot="name1">this is slot</div>  
  5.         <div slot="name2">The position is slot2 </div>  
  6.     </myslot>  
  7.   
  8.   
  9.     </div>  
  10.     <script>  
  11.     Vue.component('myslot',{  
  12.         render:function(createElement){  
  13.              var he=createElement('div',{domProps:{innerHTML:'this child div'}});  
  14.             return createElement('div',[he,this.$slots.name2,this.$slots.name1])  
  15.             }  
  16.     });  
  17.     var app=new Vue({  
  18.         el:'#app'  
  19.     })  
  20.     </script>  
  21.     </body>  


在vue2.1.0新添加了scope(虽然感觉有点怪，但是用习惯了，还蛮好用的)

同样给出一般使用和多个使用示例，

[html] view plain copy
 
  1. <body>  
  2.     <div class="" id="app">  
  3.     <myslot>  
  4.         <template scope="props">  
  5.             <div>{{props.text}}</div>  
  6.         </template>  
  7.   
  8.     </myslot>  
  9.   
  10.   
  11.     </div>  
  12.     <script>  
  13.     Vue.component('myslot',{  
  14.         render:function(createElement){  
  15.              var he=createElement('div',{domProps:{innerHTML:'this child div'}});  
  16.             return createElement('div',[he,this.$scopedSlots.default({  
  17.                 text:'hello scope'  
  18.             })])  
  19.             }  
  20.     });  
  21.     var app=new Vue({  
  22.         el:'#app'  
  23.     })  
  24.     </script>  
  25.     </body>  



多个$scopedSlot的使用

[html] view plain copy
 
    1. <body>  
    2.     <div class="" id="app">  
    3.     <myslot>  
    4.         <template slot="name2" scope="props">  
    5.             <div>{{props.text}}</div>  
    6.         </template>  
    7.         <template slot="name1" scope="props">  
    8.             <span>{{props.text}}</span>  
    9.         </template>  
    10.   
    11.     </myslot>  
    12.   
    13.   
    14.     </div>  
    15.     <script>  
    16.     Vue.component('myslot',{  
    17.         render:function(createElement){  
    18.              var he=createElement('div',{domProps:{innerHTML:'this child div'}});  
    19.             return createElement('div',  
    20.                 [he,  
    21.                 this.$scopedSlots.name1({  
    22.                 text:'hello scope'  
    23.             }),  
    24.                 this.$scopedSlots.name2({  
    25.                 text:'$scopedSlots using'  
    26.             })])  
    27.             }  
    28.     });  
    29.     var app=new Vue({  
    30.         el:'#app'  
    31.     })  
    32.     </script>  
    33.     </body>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yaowen/p/7111757.html