天天看點

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,如需轉載請自行聯系原作者

繼續閱讀