具名插槽使用

具名插槽的使用

定义具名插槽

使用slot定义额外插槽，为slot属性attribute定义name，即插槽名为slot

<template>
    <div>
        子组件
        <slot name="slot"></slot>
    </div>
</template>

<script>
export default {

}
</script>

<style></style>

使用具名插槽

插槽的使用用<template>标签，

#name 是v-slot:name的简写形式

<template>
    <div>
        <d>
            <template #slot>具名插槽 </template>
        </d>
    </div>
</template>

<script>
import d from "./d.vue";
export default {
    components: { d },
    data() {
        return {
          
        }
    }
}
</script>

<style lang="scss" scoped></style>

一个不带 name 的 <slot> 出口会带有隐含的名字“default”，也就是默认插槽，

子组件

<template>
    <div>
       
        <slot > 子组件</slot>
    </div>
</template>

<script>
export default {

}
</script>

<style></style>

夫组件

<template>
    <div>
        <d>
            <div>具名插槽 </div>
        </d>
    </div>
</template>

<script>
import d from "./d.vue";
export default {
    components: { d },
    data() {
        return {
          
        }
    }
}
</script>

<style lang="scss" scoped></style>