vue Render中slots的使用_vue render slot

作者：空白诗007 | 2024-08-17 03:31:01

踩

vue render slot

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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/991026