js_脚本之家

本文介绍了vue Render中slots的使用的实例代码,有需要了解vue
Render中slots用法的朋友可参考。希望此文章对各位有所帮助。

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

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

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

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

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

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

[html] view
plain copy

   this is slot    Vue.component('myslot',{ render:function{ var he=createElement('div',{domProps:{innerHTML:'this child div'}}); return createElement('div',[he,this.$slots.default]) } }); var app=new Vue   

   this is slot The position is slot2     Vue.component('myslot',{ render:function{ var he=createElement('div',{domProps:{innerHTML:'this child div'}}); return createElement('div',[he,this.$slots.name2,this.$slots.name1]) } }); var app=new Vue   

 

在vue2.1.0新添加了scope。同样给出一般使用和多个使用示例,

  1. <body>  
  2.     <div class=”” id=”app”>  
  3.     <myslot>  
  4.         <div>this is slot</div>  
  5.     </myslot>  
  6. js_脚本之家。  
  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>   
    {{props.text}}     Vue.component('myslot',{ render:function{ var he=createElement('div',{domProps:{innerHTML:'this child div'}}); return createElement('div',[he,this.$scopedSlots.default({ text:'hello scope' })]) } }); var app=new Vue   

多个slot的使用

多个$scopedSlot的使用

 

    {{props.text}}   {{props.text}}     Vue.component('myslot',{ render:function{ var he=createElement('div',{domProps:{innerHTML:'this child div'}}); return createElement('div', [he, this.$scopedSlots.name1({ text:'hello scope' }), this.$scopedSlots.name2({ text:'$scopedSlots using' })]) } }); var app=new Vue   

[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>  

发表评论

电子邮件地址不会被公开。 必填项已用*标注