v-slot=“”和v-slot:xx如何共存？

Question

const app = Vue.createApp({
        data(){
            return{
                firstList: [1, 2, 3],
                secondList: [4, 5, 6]
            }
        },
        template: `
            <list v-slot="slotProps">
                <template v-slot:first>
                    <div v-for="item in firstList">{{slotProps.item}}</div>    
                </template>
                <template v-slot:second>
                    <div v-for="item in secondList">{{slotProps.item}}</div>    
                </template>
            </list>
        `
    });

    app.component('list', {
        data() {
            return {
                firstList: [7, 8, 9],
                secondList: [10, 11, 12]
            }
        },
        template: `
            <div>
                <slot name="first" v-for="item in firstList" :item="item"></slot>
                <div>this is middle content</div>
                <slot name="second" v-for="item in secondList" :item="item"></slot>
            </div>
        `
    });

    const vm = app.mount("#root");

报错了：

老师，请问这个怎么实现？

Answer 1

Dell 2024-07-07 15:04:56

<list v-slot="slotProps"> , 这个 也要用 template 包裹一下