18、Vue3 作用域插槽

作用域插槽：让插槽内容能够访问子组件中，vue2中作用域插槽使用slot-scope，vue3中使用v-slot

案例

• components/slotcmp.vue

<template>
    <div>
        <ul>
            <li v-for="(item, index) in list">
                <slot :item="item" :index="index"></slot>
            </li>
        </ul>
    </div>
</template>

<script>
import { reactive } from 'vue'
export default {

    setup(){
        let list = reactive([
            { name: 'zs'  },
            { name: 'ls'  },
            { name: 'ww'  }
        ])
        return {
            list
        }
    }
}

</script>

• demo.vue

<!--  -->
<template>
    <slatcmp v-slot="{item, index}">
        {{item.name}} == {{index}}
    </slatcmp>
</template>

<script>
import slatcmp from '/@/components/slotcmp.vue'
export default {
    components: {
        slatcmp
    }
}

</script>