vue Render中slots的使用

来源：互联网发布：java培训机构知乎编辑：程序博客网时间：2024/05/02 02:39

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

<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(虽然感觉有点怪，但是用习惯了，还蛮好用的)

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

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

<body>    <div class="" id="app">    <myslot>        <template slot="name2" scope="props">            <div>{{props.text}}</div>        </template>        <template slot="name1" scope="props">            <span>{{props.text}}</span>        </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.name1({                text:'hello scope'            }),                this.$scopedSlots.name2({                text:'$scopedSlots using'            })])            }    });    var app=new Vue({        el:'#app'    })    </script>    </body>

0 0