vue Render scopedSlots

发布时间:2017-7-9 7:18:14编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"vue Render scopedSlots ",主要涉及到vue Render scopedSlots 方面的内容,对于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


上一篇:JDK7集合框架源码阅读(七) ArrayDeque
下一篇:Tomcat类载入器机制(Tomcat源代码解析六)

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款