Vue中插槽的使用

1、插槽内容

1. 两个组件

组件B:
<template>
    <div>
        <h1>我是B组件的内容</h1>
    </div>
</template>
<script>
    export default {
        name: "testB"
    }
</script>
<style scoped>
</style>

组件A:
<template>
    <div>
        <testB></testB>
    </div>
</template>
<script>
    import testB from '../components/testB'
    export default {
        name: "testA",
        components:{
            testB
        }
    }
</script>
<style scoped>
</style>

现在组件A的效果：

2、现在修改组件A和组件B的内容

<template>
    <div>
        <testB>我是A组件的内容，我叫小A</testB>
    </div>
</template>

<template>
    <div>
        <h1>我是B组件的内容</h1>
        <slot></slot>
    </div>
</template>

3、看看发生了什么变化
“我是A组件的内容，我叫小A”这段内容被分发到了组件B的容器，其实这就是插槽。现在再来看看官方的解释：Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。

2、后备内容
后备内容很简单，但很有用

B组件改造：
<template>
    <div>
        <slot>小B</slot>
    </div>
</template>

A组件：
<template>
    <div>
        <testB>小A</testB>
    </div>
</template>

3、具名插槽

自 2.6.0 起有所更新

改造组件B:

<template>
    <div>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

相应的组件A：

<template>
    <div>
        <testB>
            <template v-slot:header>
                我是头部
            </template>
            <template>
                我是内容
            </template>
            <!--任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。或者可以给他起名default-->
            <!--<template v-slot:default>-->
                <!--我是内容-->
            <!--</template>-->
            <template v-slot:footer>
                我是尾部
            </template>
        </testB>
    </div>
</template>

具名插槽就是有名字的插槽，当有多个插槽时以作区分。
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：，前提是必须要有插槽名！！！

注意 v-slot 只能添加在 < template > 上，只有当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件

4、作用域插槽

目的：让插槽内容能够访问引用的组件中才有的数据

组件 B:

<template>
    <div>
        <slot v-bind:user="user">{{user.lastName}}</slot>
    </div>
</template>
<script>
    export default {
        name: "testB",
        data(){
            return{
               user:{
                   firstName:'s',
                   lastName:'jj'
               }
            }
        }
    }
</script>

组件B绑定了一个自身的user属性，并将user.lastName当作后备内容

组件A:

<template>
    <div>
        <!--<testB>-->
            <!--<template v-slot="slotProps">-->
                <!--{{slotProps.user.firstName }}-->
            <!--</template>-->
        <!--</testB>-->
        <!--当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上,但是不能和具名插槽混用-->
        <testB v-slot="slotProps">
            {{slotProps.user.firstName }}
        </testB>
    </div>
</template>

绑定在 < slot > 元素上的特性被称为插槽 prop，即slotProps,这个名字可以随便起，现在展示的内容便是组件B中的user.firstName的了