Vue3 插槽 使用笔记

Vue3 插槽 使用笔记

介绍

在 Vue 3 中，插槽（Slot）是一个非常强大的特性，它允许我们更好地组织和重用组件。通过定义插槽，子组件可以预留出由父组件控制的区域，这样父组件就可以向这些区域填充自己的内容。这增加了组件的灵活性和可复用性。

Vue 3 中插槽的种类

在 Vue 3 中，插槽主要分为以下几种类型：

默认插槽（Default Slot）

默认插槽是最基本的插槽形式，如果没有特别指定插槽名称，则所有内容都会被放置在这个插槽中。

示例：

<template>
  <div>
    <slot>默认内容slot>
  div>
template>


<template>
  <ChildComponent>
    
    <p>这是从父组件传入的内容。p>
  ChildComponent>
template>

具名插槽（Named Slot）

具名插槽允许我们在子组件中定义多个插槽，并给每个插槽指定一个名称。

示例：

<template>
  <div>
    <header>
      <slot name="header">默认头部内容slot>
    header>
    <main>
      <slot>默认主体内容slot>
    main>
    <footer>
      <slot name="footer">默认页脚内容slot>
    footer>
  div>
template>


<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>这是头部h1>
    template>
    <p>这是主体内容。p>
    <template v-slot:footer>
      <p>这是页脚p>
    template>
  ChildComponent>
template>

作用域插槽（Scoped Slot）

作用域插槽允许父组件访问子组件的数据。子组件可以通过 v-slot 指令传递数据给父组件。

示例：

<template>
  <slot :item="item">
    <span>{{ item.name }}span>
  slot>
template>
<script>
export default {
  data() {
    return {
      item: { name: '示例名称' }
    };
  }
};
script>


<template>
  <ChildComponent v-slot:item="{ item }">
    <p>{{ item.name }}p>
  ChildComponent>
template>

使用技巧

1. 简化具名插槽

在 Vue 3 中，你可以使用