Vue Slot v-for 传递参数到子组件

刚开始看Slot在v-for中使用,有些小绕,经过测试,以下代码可用:

<div id="wrapper">
    <parent :list="list">
        <template scope="props">
            <child :data="props.rowdata"></child>
        </template>
    </parent>
</div>
Vue.component('parent', {
    props: ["list"],
    template: `
        <ul>
            <div>title{{list.length}}</div>
            <slot v-for="item in list" :rowdata="item">
            </slot>
        </ul>
    `
})

Vue.component('child', {
    props: ["data"],
    template: `
        <li >
            {{data}}
        </li>
    `
})

new Vue({
    el: '#wrapper',
    data: function () {
        return {
            list: [{
                    a: 1,
                    b: 2
                },
                {
                    a: 1,
                    b: 2
                },
            ]
        }
    },
})
展示评论