关于前端:vue-插槽-slot

能够利用插槽缩小代码反复,例如循环。

Vue.component('ComponentA',{
    data(){
        return {
            count:0
        }
    },
    template:`
    <div>
        <slot name="header" :count="count">1</slot>
        <slot>qqq(默认值)</slot>
        <slot name="footer">2</slot>
    </div>
    `
})
var vm = new Vue({
    el:"#app",
    data:{
        msg:'sxq'
    },
    template:`
    <div><ComponentA>
        111
        <template v-slot:header="data">{{data}} -- header</template>
        <template v-slot:footer></template>
        </ComponentA></div>
    `
})

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理