天天看点

vue Render scopedSlots

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

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

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

<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的使用

        <div slot="name1">this is slot</div>  

        <div slot="name2">The position is slot2 </div>  

            return createElement('div',[he,this.$slots.name2,this.$slots.name1])  

    </body>  

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

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

        <template scope="props">  

            <div>{{props.text}}</div>  

        </template>  

            return createElement('div',[he,this.$scopedSlots.default({  

                text:'hello scope'  

            })])  

多个$scopedSlot的使用

        <template slot="name2" scope="props">  

        <template slot="name1" scope="props">  

            <span>{{props.text}}</span>  

            return createElement('div',  

                [he,  

                this.$scopedSlots.name1({  

            }),  

                this.$scopedSlots.name2({  

                text:'$scopedSlots using'  

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

继续阅读