vue Render scopedSlots-阿里云开发者社区

vue Render scopedSlots

2017-11-15 3362

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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

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

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

[html]view plain copy
     
   
<body>  
    <div class="" id="app">   
    <myslot>   
        <div>this is slot</div>   
    </myslot>   
  
  
    </div>   
    <script>   
    Vue.component('myslot',{  
        render:function(createElement){  
             var he=createElement('div',{domProps:{innerHTML:'this child div'}});   
            return createElement('div',[he,this.$slots.default])  
            }  
    });  
    var app=new Vue({   
        el:'#app'  
    })  
    </script>   
    </body>    

多个slot的使用

[html]view plain copy
     
   
<body>  
    <div class="" id="app">   
    <myslot>   
        <div slot="name1">this is slot</div>   
        <div slot="name2">The position is slot2 </div>   
    </myslot>   
  
  
    </div>   
    <script>   
    Vue.component('myslot',{  
        render:function(createElement){  
             var he=createElement('div',{domProps:{innerHTML:'this child div'}});   
            return createElement('div',[he,this.$slots.name2,this.$slots.name1])  
            }  
    });  
    var app=new Vue({   
        el:'#app'  
    })  
    </script>   
    </body>   

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

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

[html]view plain copy
     
   
<body>  
    <div class="" id="app">   
    <myslot>   
        <template scope="props">   
            <div>{{props.text}}</div>   
        </template>   
  
    </myslot>   
  
  
    </div>   
    <script>   
    Vue.component('myslot',{  
        render:function(createElement){  
             var he=createElement('div',{domProps:{innerHTML:'this child div'}});   
            return createElement('div',[he,this.$scopedSlots.default({  
                text:'hello scope'  
            })])  
            }  
    });  
    var app=new Vue({   
        el:'#app'  
    })  
    </script>   
    </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>
11. </myslot>
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>

本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/7111757.html，如需转载请自行联系原作者

vue Render scopedSlots

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

vue Render scopedSlots

热门文章

最新文章

相关课程

相关电子书