vue Render中slots的使用

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

v折耳

27026人浏览 · 2017-01-11 16:02:35

v折耳 · 2017-01-11 16:02:35 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^