插槽Slots（续集）

渲染作用域

插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的

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

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
    <slot></slot>
</template>

默认内容

在外部没有提供任何内容的情况下，可以为插槽指定默认内容

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
    <slot>插槽默认值</slot>
</template>

具名插槽

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <ComponentB>
        <template v-slot:header>
            <h3>标题</h3>
        </template>
        <template v-slot:main>
            <p>内容</p>
        </template>
    </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"></slot>
    <hr>
    <slot name="main"></slot>
</template>

v-slot 有对应的简写 #，因此 <template v-slot:header> 可以简写为 <template #header>。其意思就是“将这部分模板片段传入子组件的 header 插槽中”

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <ComponentB>
        <template #header>
            <h3>标题</h3>
        </template>
        <template #main>
            <p>内容</p>
        </template>
    </ComponentB>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
    data(){
        return{
            message:"message在父级"
        }
    },
    components: {
        ComponentB
    }
}
</script>