插槽Slots(再续集)

在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽

我们也确实有办法这么做！可以像对组件传递 props 那样，向一个插槽的出口上传递 attributes

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <ComponentB v-slot="slotProps">
        <h3>{{ message }}-{{ slotProps.text }}</h3>
    </ComponentB>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
    data(){
        return{
            message:"message在父级"
        }
    },
    components: {
        ComponentB
    }
}
</script>

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
    <slot :text="message"></slot>
</template>
<script>
export default {
    data(){
        return{
            message:"ComponentB中的数据"
        }
    }
}
</script>

具名插槽传递数据

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <ComponentB #header="slotProps">
        <h3>{{ message }}-{{ slotProps.text }}</h3>
    </ComponentB>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
    data(){
        return{
            message:"message在父级"
        }
    },
    components: {
        ComponentB
    }
}
</script>

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
    <slot name="header" :text="message"></slot>
</template>
<script>
export default {
    data(){
        return{
            message:"ComponentB中的数据"
        }
    }
}
</script>