Vue学习：插槽

Vue学习：插槽

1. Vue 插槽

​ 在之前的章节中，我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props，但组件要如何接收模板内容呢？在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。这时我们可以使用vue提供的插槽来实现.

举例来说，这里有一个 组件，可以像这样使用：

<FancyButton>
  Click me! 
FancyButton>
1
2
3

而 的模板是这样的：

<button class="fancy-btn">
  <slot>slot> 
button>

1
2
3
4

元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r72LzfpK-1667816154015)(assets/image-20221027173850154.png)]

最终渲染出的 DOM 是这样：

<button class="fancy-btn">Click me!button>
1

注意:

​ 插槽内容可以是任意合法的模板内容，不局限于文本。例如我们可以传入多个元素，甚至是组件：

<FancyButton>
 <span style="color:red">Click me!span>
 <AwesomeIcon name="plus" />
FancyButton>
1
2
3
4

​ 通过使用插槽， 组件更加灵活和具有可复用性。现在组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。

1.1 具名插槽

​ 上面我们使用的是默认插槽,它是没有名字的,那如果一个组件内部,它将使用多个slot时,那我们怎么知道把某些代码片段放到那个slot中呢?那这个时候,我们就需要使用到具名插槽.所谓的具名插槽,就是给每个slot标签添加一个name属性.

​ 比如:在一个 组件中，有如下模板：

<div class="container">
  <header>
    
  header>
  <main>
    
  main>
  <footer>
    
  footer>
div>

1
2
3
4
5
6
7
8
9
10
11
12

对于这种场景， 元素可以有一个特殊的 属性name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容：

<div class="container">
  <header>
    <slot name="header">slot>
  header>
  <main>
    <slot>slot>
  main>
  <footer>
    <slot name="footer">slot>
  footer>
div>

1
2
3
4
5
6
7
8
9
10
11
12

这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 出口会隐式地命名为“default”。

在父组件中使用 时，我们需要一种方式将多个插槽内容传入到各自目标插槽的出口。此时就需要用到具名插槽了：

要为具名插槽传入内容，我们需要使用一个含 v-slot 指令的