Vue — 插槽

一、默认插槽：

默认插槽是最常见的插槽类型。它允许我们在组件中插入任意内容，并且如果没有指定具名插槽，则会将内容插入到默认插槽中。

//子组件
<template>
  <div>
    <h1>组件标题</h1>
    <slot></slot>
  </div>
</template>

//父组件
<template>
  <div>
    <h1>组件标题</h1>
    <slot></slot>
  </div>
</template>

二、具名插槽：

除了默认插槽，Vue 还支持具名插槽，用于在组件中定义多个可替换的区域。每个具名插槽都有一个唯一的名称，并且在组件实例中使用 slot 属性进行填充。

//子组件
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

//父组件
<template>
  <div>
    <MyComponent>
      <template v-slot:header>
        <h1>这是头部插槽的内容。</h1>
      </template>

      <p>这是默认插槽的内容。</p>

      <template v-slot:footer>
        <footer>这是尾部插槽的内容。</footer>
      </template>
    </MyComponent>
  </div>
</template>

三、作用域插槽：

作用域插槽是一种特殊的插槽类型，允许子组件向父组件传递数据。通过在插槽中使用具名插槽的方式，我们可以将子组件的数据传递到父组件，并在父组件的模板中使用这些数据。

<!-- 子组件 MyComponent.vue -->
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 25
      }
    };
  }
}
</script>

<!-- 父组件 App.vue -->
<template>
  <div>
    <MyComponent>
      <template v-slot="{ user }">
        <p>用户名：{{ user.name }}</p>
        <p>年龄：{{ user.age }}</p>
      </template>
    </MyComponent>
  </div>
</template>