vue-chacao

//插槽chacao.vue
<template>
    <div>
        <h1>插槽的使用</h1>
        <h2>匿名插槽</h2>
        --------------
        <Chacaoson>
            <!-- <div slot="slotA">
                <h1>这里给了slotA插槽</h1>
            </div>
            <div slot="slotB">
                <h1>这里给了slotB插槽</h1>
            </div> -->
        </Chacaoson>
        <Chacaoson>
            <!-- 2.6.x之前的写法 -->
            <template slot-scope="data">
                <p v-for="(item, index) in data.list" :key="index">{{item}}</p>
            </template>
        </Chacaoson>
    </div>
</template>

<script>
    import Chacaoson from './Chacaoson'
    export default {
        components: {
            Chacaoson
        }
    }
</script>

<style scoped>

</style>
//chaocaoSon.vue
<template>
    <div>
        <!-- <slot name="slotA"></slot>
        <p>这里是插槽的子组件</p>
        <slot name="slotB"></slot> -->
        <slot :list="list">
            <ul>
                <li v-for="(item, index) in list" :key="index">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: ["张三", "李四", "王二麻子"]
            }
        },
    }
</script>

<style scoped>

</style>