vue --- 插槽 slot

Posted 史潇倩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
    `
})

以上是关于vue --- 插槽 slot的主要内容,如果未能解决你的问题,请参考以下文章

vue----slot插槽

Vue--插槽slot

vue插槽 Slots

vue插槽slot理解

Vue笔记:插槽(slot)

Vue插槽理解