第十八节——插槽

概念

在Vue中,插槽(Slots)是一种用于组件模板中的特殊语法,用于实现组件的内容分发和复用。插槽允许父组件在子组件的模板中插入任意的内容,从而实现更灵活的组件组合和定制

默认插槽(Default Slot)

默认插槽是最常用的插槽类型。在子组件的模板中,使用<slot></slot>标签定义默认插槽的位置。父组件在使用子组件时,可以在子组件的标签内放置内容,这些内容将被插入到子组件模板中的默认插槽位置

父组件

复制代码
<template>
  <div>
    <LearnSlot2>
      任意内容
    </LearnSlot2>
  </div>
</template>

<script>
import LearnSlot2 from "./learn-slot2.vue";

export default {
  components: {
    LearnSlot2,
  },
};
</script>

子组件

复制代码
<template>
  <div>
    <slot></slot>
  </div>
</template>

具名插槽(Named Slots)

除了默认插槽,Vue还支持具名插槽。具名插槽允许在子组件中定义多个命名插槽,父组件可以根据插槽的名称来插入内容。在子组件的模板中,使用<slot name="slotName"></slot>标签定义具名插槽的位置,并为每个插槽指定一个唯一的名称。在父组件使用子组件时,使用具名插槽的语法来插入相应名称的内容。

父组件

复制代码
<template>
  <div>
    <LearnSlot2>
      <!-- <h1>一级标题</h1> -->
      <!-- 
        # 后面是插槽的名字
       -->
      <template #footer>
        <div>底部</div>
      </template>
      <template #header>
        <div>头部</div>
      </template>
      <template #content>
        <div>内容</div>
      </template>
    </LearnSlot2>
  </div>
</template>

<script>
import LearnSlot2 from "./learn-slot2.vue";

export default {
  components: {
    LearnSlot2,
  },
};
</script>

子组件

复制代码
<template>
  <div>
    一个组件
    <!-- 
      使用slot这个组件展示
      组件标签中间的内容
     -->
    <!-- 
      使用name跟上插槽的名字
      -->
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

作用域插槽(Scoped Slots)

作用域插槽是一种特殊的插槽类型,它允许slot组件向子组件传递数据,并且子组件可以在插槽中使用该数据进行渲染。

父组件

复制代码
<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ListComponent>
      <!-- 使用作用域插槽来渲染列表项 -->
      <template v-slot="{ item }">
        <li>{{ item.name }}</li>
      </template>
    </ListComponent>
  </div>
</template>

<script>
import ListComponent from './ListComponent.vue';

export default {
  components: {
    ListComponent
  }
}
</script>

子组件

复制代码
<!-- ListComponent.vue -->
<template>
  <div>
    <h2>List Component</h2>
    <ul>
      <slot v-for="item in items" :item="item" :key="item.id"></slot>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
}
</script>
相关推荐
DoraBigHead8 分钟前
🧭 React 理念:让时间屈服于 UI —— 从同步到可中断的演化之路
前端·javascript·面试
千码君201611 分钟前
React Native:发现默认参数children【特殊的prop】
javascript·react native·ecmascript·react·组件树
羊羊小栈27 分钟前
基于「多模态大模型 + BGE向量检索增强RAG」的航空维修智能问答系统(vue+flask+AI算法)
vue.js·人工智能·python·语言模型·flask·毕业设计
敢敢J的憨憨L31 分钟前
GPTL(General Purpose Timing Library)使用教程
java·服务器·前端·c++·轻量级计时工具库
喝拿铁写前端44 分钟前
Vue 组件通信的两种世界观:`.sync` 与普通 `props` 到底有什么不同?
前端·vue.js·前端框架
美酒没故事°1 小时前
npm源管理器:nrm
前端·npm·npm源
用户22152044278001 小时前
vue3组件间的通讯方式
前端·vue.js
三十_A1 小时前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug
下位子1 小时前
『AI 编程』用 Claude Code 从零到一开发全栈减脂追踪应用
前端·ai编程·claude
tyro曹仓舒1 小时前
Vue单文件组件到底需不需要写name
前端·vue.js