Vue 3 第十九章：组件七（插槽）

1. 插槽

插槽是一种在Vue组件中定义可复用内容的机制。它可以让你将组件的内容分发到它的子组件中，从而使得组件更具有灵活性和可重用性。Vue3中的插槽被称为“模板插槽”，使用时需要用到新的语法。具体用法如下：

1.1. 匿名插槽

在子组件中，我们可以使用 标签定义一个插槽：

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

在父组件中，我们可以直接插入子组件中定义的插槽：

<template>
  <Parent>
    
    <div>我是插槽内容div>
  Parent>
template>

这样，在运行时，插槽内容会替换 标签内的内容。

1.2. 具名插槽

如果我们在一个组件中定义了多个插槽，可以使用具名插槽来区分它们：

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

在父组件中，我们可以使用 v-slot 指令来插入具名插槽：

<template>
  <Parent>
    
    <template v-slot:header>
      <h1>这里是头部h1>
    template>

    
    <div>这里是中间部分div>

    
    <template v-slot:footer>
      <h1>这里是底部h1>
    template>
  Parent>
template>

v-slot有对应的简写#，因此