VUE学习笔记：插槽

插槽的简单使用

slot插槽是vue2.6加入的内容，允许以一种特殊的方式来合成组件，这里以一个简单的例子来说明

比如我们在vuecli中创建一个项目并修改HelloWorld.vue的代码，用slot标签包裹起来的就是我们的插槽，而直接写在里面的内容就是插槽默认的内容

<template>
    <div>
        <h1>下面是个插槽</h1>
        <slot>
            <h1>插槽模板</h1>
            <img src="../assets/logo.png">
        </slot>
    </div>
</template>

我们在使用组件的时候，在组件的起始标签和终止标签之间包裹的部分会替换插槽中的内容

比如这么使用组件

<template>
    <div class="home">
        <HelloWorld>
            <h1>hello</h1>
        </HelloWorld>
    </div>
</template>

在页面上就会显示

如果我们不在起始标签和结束标签之间写任何东西，则会显示插槽内原本的内容

<template>
    <div class="home">
        <HelloWorld></HelloWorld>
    </div>
</template>

而如果我们不使用插槽slot，则起止标签中间包裹的任何内容都不会显示

具名插槽

在实际使用中，我们会有一个组件要用到多个插槽的需求，这里需要用到具名插槽，通俗的说就是给插槽取名区别开来，直接看例子

<template>
    <div>
        <h1>不同类型的名人</h1>
        <div>
            <h2>帅哥</h2>
            <slot name = "handsome"></slot>
        </div>
        <div>
            <h2>有钱</h2>
            <slot name = "money"></slot>
        </div>
    </div>
</template>

<subCom>
    <template v-slot:handsome>
        <h2>吴彦祖</h2>
    </template>
    <template v-slot:money>
        <h2>马云</h2>
        <h2>马化腾</h2>
    </template>
</subCom>

而没有被包裹在带有v-slot的template标签中的内容都会被视为默认插槽的内容

当然我们也可以把它写出来

1
2
3

<template v-slot:default>
    <h2>爱因斯坦</h2>
</template>

插槽的作用域

子组件data中的内容是没办法直接在父组件的插槽中使用的，因为插槽中的内容是在父组件渲染的，我们需要将子组件的数据作为插槽的一个属性绑定，才可以在父组件中使用它

实现方法如下

<!-- 子组件 -->
<div>
    <slot :username="username" :sex="sex"></slot>
<div>
<!-- 父组件 -->
<subcom>
    <!-- 写法一 -->
    <template v-slot:default="slotprops">
        <h1>{{slotprops.username}}</h1>
    </template>
    <!-- 写法二 -->
    <template v-slot:default="{username, sex}">
        <h1>{{username}}</h1>
    </template>
</subcom>