插槽

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

默认插槽

默认插槽是最基本的插槽形式，当子组件中没有指定具体名称的插槽内容时，会渲染到默认插槽中。一个组件只有一个默认插槽。

Parent.vue

<template>
  <Child title="今日热门游戏">
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
  </Child>
</template>

Child.vue

<!-- 子组件中： -->
<template>
  <div class="item">
    <h3>{{ title }}</h3>
    <!-- 默认插槽 -->
    <slot></slot>
  </div>
</template>

具名插槽

具名插槽允许一个组件有多个具名插槽，通过名称来区分不同的插槽位置。

Parent.vue

<template>
  <Child title="今日热门游戏">
    <template v-slot:s1>
      <ul>
        <li v-for="g in games" :key="g.id">{{ g.name }}</li>
      </ul>
    </template>
    <template #s2>
      <a href="">更多</a>
    </template>
  </Child>
</template>

Child.vue

<template>
  <div class="item">
    <h3>{{ title }}</h3>
    <slot name="s1"></slot>
    <slot name="s2"></slot>
  </div>
</template>

作用域插槽

作用域插槽允许子组件将数据传递给插槽内容，使父组件可以访问子组件内部的数据。

Parent.vue

<template>
  <!-- <Child #default="params"></Child> -->
  <!-- <Child v-slot:default="params"></Child> -->
  <Child v-slot="params">
    <!-- 其他写法 -->
    <ul>
      <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
    </ul>
  </Child>
</template>

Child.vue

<template>
  <div class="category">
    <h2>今日游戏榜单</h2>
    <slot :games="games" a="哈哈"></slot>
  </div>
</template>

<script setup lang="ts" name="Category">
import { reactive } from "vue";
let games = reactive([
  { id: "asgdytsa01", name: "英雄联盟" },
  { id: "asgdytsa02", name: "王者荣耀" },
  { id: "asgdytsa03", name: "红色警戒" },
  { id: "asgdytsa04", name: "斗罗大陆" },
]);
</script>

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24