Vue 组件基础——插槽

一、插槽基本语法

Vue为组件的封装者提供了插槽（slot），插槽是指开发者在封装组件时不确定的、希望由组件的使用者指定的部分。也就是说，插槽是组件封装期间为组件的使用者预留的占位符，允许组件的使用者在组件内展示特定的内容。通过插槽，可以使组件更灵活、更具有可复用性。

1.1定义与使用插槽

在组件中，通过<slot>标签定义插槽，从而在组件中预留占位符。

<slot>插槽的默认内容</slot>

使用插槽即在父组件中使用子组件的插槽，在使用时需要将子组件写成双标签的形式，在双标签内提供插槽内容。

 <子组件>插槽内容</子组件>

1.2具名插槽

在Vue中当需要定义多个插槽时，可以通过具名插槽来区分不同的插槽。具名插槽是给每一个插槽定义一个名称，这样就可以在对应名称的插槽中提供对应的数据了。

插槽通过<slot>标签来定义，<slot>标签有一个name属性，用于给各个插槽分配唯一的名称，以确定每一处要渲染的内容。添加name属性的<slot>标签可用来定义具名插槽。

<slot name="插槽名称"></slot>

在父组件中，如果要把内容填充到指定名称的插槽中，可以通过一个包含v-slot指令的<template>标签来实现，语法格式如下。 其中v-slot:可以简写为#。

<子组件名>

  <template #插槽名称></template>

</子组件名>

1.3作用域插槽

 一般情况下，在父组件中不能使用子组件中定义的数据。如果想要在父组件中使用子组件中定义的数据，则需要通过作用域插槽来实现。作用域插槽是带有数据的插槽，子组件提供一部分数据给插槽，父组件接收子组件的数据进行页面渲染。

在封装组件的过程中，可以为预留的插槽定义数据，供父组件接收并使用子组件中的数据。在作用域插槽中，可以将数据以类似传递props属性的形式添加到<slot>标签上。

<slot message="Hello Vue.js"></slot>

在使用具名插槽时，插槽属性可以作为v-slot的值被访问到，基本语法格式为“v-slot:插槽名称="形参"”，简写形式为“#插槽名称="形参"”，使用简写形式使用插槽的示例代码如下。（在Vue中，每个插槽都有name属性，表示插槽的名称。默认插槽在定义时虽然省略了<slot>标签的name属性，但是name属性默认为default。） 

<MyHeader>

  <template #header="{ message }">

    {{ message }}

  </template>

</MyHeader>

二、代码演示

创建MySlot.vue组件：

<template>
    <slot headMessage="Vue.js插槽" name="header"></slot>
    <hr>
    <slot bodyMessage="插槽的定义与使用、具名插槽、作用域插槽" name="body"></slot>
    <hr>
    <slot :user="user" name="foot"></slot>
</template>

<script setup>
import { reactive } from 'vue'
const user = reactive({
    name: 'XuPin',
    telephone: '156xxxxx',
    email: '1127xxx@qq.com'
})
</script>

创建MySlotFather.vue组件：

<template>
    <MySlot>
        <template #header="{headMessage}">
            <p>标题：{{ headMessage }}</p>
        </template>
        <template #body="{bodyMessage}">
            <p>主题内容：{{ bodyMessage }}</p>
        </template>
        <template #foot="{ user }">
            <p>
            联系人：{{ user.name }}<br>
            电话：{{ user.telephone }} <br>
            邮箱：{{ user.telephone }}</p>
        </template>
    </MySlot>
</template>

<script setup>
import MySlot from './MySlot.vue'
</script>

浏览器显示结果：

  附本节项目代码下载地址：

链接：https://pan.baidu.com/s/19O-XwblGVB1xlcdXF-fFAQ?pwd=8888 
提取码：8888