Vue 3教程 - 插槽slot

slot解决的问题

我们知道，可以通过属性从父组件传递信息到子组件。但这是远远不够的。有些时候，我们需要定义一个通用的子组件，然后想传递一组HTML到这个子组件，这时普通的属性就不太适合了。我们应该使用的是slot。也就是说，在父组件中可以通过slot来控制子组件中的内容。

父组件：

<MyComponent prop1="value1" prop2="value2">
  <h1>My title</h1>
  <div>My content</div>
</MyComponent>  

子组件中：

<template>
  <div>
    <div>
      <slot></slot>
    </div>
  </div>    
</template>  

在上面例子中，Vue会将和之间的任何内容，包括HTML，传递给子组件中，并在slot标记中展示。

slot的默认值

可以在子组件中给slot指定默认值：

<slot>Default content</slot>

那么，在父组件中调用子组件时，如果不传递slot，则会使用这个默认值：

<MyComponent />

给slot命名

如果想要对slot进行更加灵活的控制，可以给slot特定的名字。这种命名的slot适用于当子组件不想照单全收父组件传递过来的HTML并直接显示，而是想要针对不同部分进行区分处理的时候。

比如：在父组件中：

<MyComponent prop1="value1" prop2="value2">
  <h1>My title</h1>
  <div>My content</div>
  <template v-slot:friends>
    <a href="https://www.lcoding.club">逻思编程</a>
  </template>  
</MyComponent>  

在子组件中：

<div>
  下面调用默认的slot：
  <slot></slot>
  <div>
    下面调用名字为friends的slot：
    <slot name="friends"></slot>
  </div>
</div>    

在子组件中，如果有多个slot时，允许有一个未命名slot。在父组件中对未命名slot的调用为：

<template v-slot:default>

slot的属性

通过slot props，可以将属性从子组件传递给父组件，并由父组件做进一步处理，比如显示在UI中。

在子组件中：

<template>
  <div v-for="student in students" :key="student.id">
    <slot :id="student.id" :name="student.name"></slot>
  </div>  
</template>  
...
data() {
  return {
    students: [
      {
        id: '9901',
        name: 'Lucas'
      },
      {
        id: '9902',
        name: 'Lucy'
      }
    ]
  }
}

在父组件中：

<template v-slot:default="slotProps">
  {{ slotProps.id }} {{ slotProps.name }}
</template>