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

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

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>
    `
})