vue中的作用域插槽(slot)

<body>
    <div id="root">
        <child>
            <template slot-scope="props">
                <h1>{{props.item}}</h1>
            </template>
        </child>
    </div>
    <script>

        Vue.component('child',{
            data: function() {
                return {
                    list: [1,2,3,4],
                }
            },
            template: `<div>
                            <ul>
                                <slot v-for="item of list" :item=item></slot>
                            </ul>
                        </div>`
            
        })
        var vm = new Vue({
            el: '#root',
            data: {

            }
        })
    </script>
</body>

猜你喜欢

转载自blog.csdn.net/twinkle_j/article/details/81115871