您现在的位置是:首页 >技术教程 >Vue 3 第十九章:组件七(插槽)网站首页技术教程

Vue 3 第十九章:组件七(插槽)

剑九 六千里 2024-06-14 17:17:43
简介Vue 3 第十九章:组件七(插槽)

1. 插槽

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

1.1. 基本使用

在父组件中,我们可以使用 <slot> 标签定义一个插槽:

<!-- Parent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

在子组件中,我们可以使用 <template> 标签插入父组件中定义的插槽:

<!-- Child.vue -->
<template>
  <Parent>
    <!-- 这里是插槽内容 -->
    <div>我是插槽内容</div>
  </Parent>
</template>

这样,在运行时,插槽内容会替换 <slot> 标签内的内容。

1.2. 具名插槽

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

<!-- Parent.vue -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

在子组件中,我们可以使用 v-slot 指令来插入具名插槽:

<!-- Child.vue -->
<template>
  <Parent>
    <!-- 这里是具名插槽内容 -->
    <template v-slot:header>
      <h1>这里是头部</h1>
    </template>

    <!-- 这里是默认插槽内容 -->
    <div>这里是中间部分</div>

    <!-- 这里是具名插槽内容 -->
    <template v-slot:footer>
      <h1>这里是底部</h1>
    </template>
  </Parent>
</template>

v-slot有对应的简写#,因此<template v-slot:header>可以简写为 <template #header>。其意思就是“将这部分模板片段传入父组件的header插槽中”。

1.3. 作用域插槽

作用域插槽允许父组件将数据传递给插槽,让子组件可以使用这些数据。在父组件中,我们可以使用v-bind:名称="数据"来传递数据,在子组件中 v-slot 指令来接收数据:

<!-- Parent.vue -->
<template>
  <div>
    <slot v-bind:item="item" v-for="item in items"></slot>
  </div>
</template>

在子组件中,我们可以使用 v-slot 指令来插入作用域插槽:

<!-- Child.vue -->
<template>
  <Parent>
    <!-- 这里是作用域插槽内容 -->
    <template v-slot="{ item }">
      <div>{{ item }}</div>
    </template>
  </Parent>
</template>

这样,在运行时,父组件中定义的 items 数组中的每个元素都会被传递给子组件的作用域插槽。

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。