vue Render中slots的使用

最新推荐文章于 2024-06-07 11:53:44 发布

v折耳

最新推荐文章于 2024-06-07 11:53:44 发布

阅读量2.6w

点赞数 4

分类专栏： vue 文章标签： Render slots

本文链接：https://blog.csdn.net/wngzhem/article/details/54344191

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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>

v折耳

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
vue Render中slots的使用

render 中 slot 的一般默认使用方式如下：this.$slots.default 对用 template的的使用没有name 。想使用多个slot 的话。需要对slot命名唯一。使用this.$slots.name 在render中添加多个slot。 this is slot Vue.compone
复制链接

扫一扫

专栏目录