vue之组件插槽slot、作用域插槽

最新推荐文章于 2023-02-23 17:42:01 发布

一个小码虫

最新推荐文章于 2023-02-23 17:42:01 发布

阅读量202

点赞数

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

本文链接：https://blog.csdn.net/m0_47214316/article/details/118994947

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

父组件决定子组件显示子组件数据

const app = Vue.createApp({
    template:`
    <div>
        <mylist v-slot="slotProps">
            <ul>
                <li>{{ slotProps.item }}</li>
            </ul>
        </mylist>

    </div>
    `,
});
app.component('mylist',{
    data(){
        return{
            list:[1,2,3,4,5]
        }
    },
    template:`
     <slot v-for="item in list" :item="item"></slot>
    `
})

或者

const app = Vue.createApp({
    template:`
    <div>
        <mylist v-slot="item">
            <ul>
                <li>{{ item }}</li>
            </ul>
        </mylist>

    </div>
    `,
});
app.component('mylist',{
    data(){
        return{
            list:[1,2,3,4,5]
        }
    },
    template:`
     <slot v-for="item in list" :item="item"></slot>
    `
})