Vue标准插槽和作用域插槽区别与用法详解

news2024/11/15 15:41:55

文章目录

- 1. 标准插槽（Standard Slots）
- 2. 作用域插槽（Scoped Slots）
- 3.标准插槽Vs作用域插槽
- 4.作用域插槽高级用法
- - 1. 作用域插槽中的默认值
  - 2. 作用域插槽的多个插槽
  - 3. 作用域插槽的动态插槽名
  - 4. 作用域插槽中的函数传递
- 5.作用域插槽使用场景

✍创作者：全栈弄潮儿
🏡 个人主页：全栈弄潮儿的个人主页
🏙️ 个人社区，欢迎你的加入：全栈弄潮儿的个人社区
📙 专栏地址：vue2进阶

Vue.js中有两种主要类型的插槽：标准插槽和作用域插槽（Scoped Slots）。它们用于在父组件中将内容传递给子组件，并有不同的用法和功能。

1. 标准插槽（Standard Slots）

标准插槽是Vue.js中的插槽机制的基本形式。通过标准插槽，父组件可以将内容传递给子组件，并在子组件中插入这些内容。标准插槽通常用于静态内容的传递。

示例：

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <p>这是插槽内容</p>
  </child-component>
</template>

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

在上面的示例中，子组件使用<slot></slot>来插入父组件传递的内容。

2. 作用域插槽（Scoped Slots）

作用域插槽是Vue.js的高级插槽机制，允许父组件将数据传递给子组件，同时在子组件中自定义渲染这些数据。作用域插槽通常用于需要动态渲染的内容以及子组件需要访问来自父组件的数据的情况。

示例：

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <template v-slot:default="slotProps">
      <p>{{ slotProps.message }}</p>
    </template>
  </child-component>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :message="dataFromParent"></slot>
  </div>
</template>

在上面的示例中，父组件传递了一个名为message的数据给子组件，并子组件使用v-slot来接收这个数据并自定义渲染。

3.标准插槽Vs作用域插槽

标准插槽用于将静态内容传递给子组件，子组件不会对内容进行修改或访问数据。
作用域插槽用于动态渲染内容，父组件可以向子组件传递数据，并子组件可以自定义渲染数据。
作用域插槽是标准插槽的进阶形式，用于更高级的组件交互和自定义渲染。

4.作用域插槽高级用法

作用域插槽（Scoped Slots）具有丰富的高级用法，它们可以用于更复杂的组件交互和数据传递。以下是一些高级用法和示例：

1. 作用域插槽中的默认值

你可以为作用域插槽中的数据提供默认值，以处理可能不存在的数据。示例：

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <template v-slot:default="slotProps">
      <p>{{ slotProps.message || 'No message provided' }}</p>
    </template>
  </child-component>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :message="dataFromParent"></slot>
  </div>
</template>

这样，如果父组件未提供message属性，作用域插槽中将显示默认消息。

2. 作用域插槽的多个插槽

你可以在子组件中定义多个具名插槽，以允许父组件在插槽中传递不同的模板。示例：

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <template v-slot:header="headerSlotProps">
      <h1>{{ headerSlotProps.title }}</h1>
    </template>
    <template v-slot:content="contentSlotProps">
      <p>{{ contentSlotProps.message }}</p>
    </template>
  </child-component>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="header" :title="headerData"></slot>
    <slot name="content" :message="contentData"></slot>
  </div>
</template>

子组件允许父组件在两个不同的插槽中传递数据和模板。

3. 作用域插槽的动态插槽名

你可以使用动态的插槽名，以根据父组件的条件选择不同的插槽。示例：

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <template v-slot:[slotName]="slotProps">
      <p>{{ slotProps.message }}</p>
    </template>
  </child-component>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :name="slotName" :message="dataFromParent"></slot>
  </div>
</template>

父组件可以通过slotName属性指定要使用的插槽。

4. 作用域插槽中的函数传递

你可以将函数传递给作用域插槽，使父组件能够调用子组件中的函数。示例：

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <template v-slot:default="slotProps">
      <button @click="slotProps.onButtonClick">Click me</button>
    </template>
  </child-component>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :onButtonClick="handleButtonClick"></slot>
  </div>
</template>
<script>
export default {
  methods: {
    handleButtonClick() {
      // 执行某些操作
    }
  }
}
</script>

父组件可以通过onButtonClick属性调用子组件中的函数。

这些高级用法扩展了作用域插槽的强大功能，允许你构建更具动态性和可配置性的组件，使父子组件之间的通信更加灵活。

5.作用域插槽使用场景

作用域插槽（Scoped Slots）适用于多种使用场景，它们提供了更高级的组件交互和数据传递。以下是一些使用作用域插槽的常见场景：

可配置组件：作用域插槽允许父组件自定义子组件的渲染，这在构建通用组件库或可配置的UI组件时非常有用。例如，你可以创建一个通用的模态框组件，允许父组件决定模态框的标题、内容和按钮。
数据传递：父组件可以通过作用域插槽向子组件传递数据，这在复杂的数据传递场景中非常有用。例如，你可以将父组件中的数据传递给子组件以动态渲染内容。
表格和列表：作用域插槽可用于渲染表格、列表和其他重复结构，使父组件能够控制每个单元格或项的内容和格式。
动态组件：作用域插槽可用于动态组件，允许父组件根据条件或路由来选择要渲染的组件。
可复用组件：你可以创建通用的渲染组件，允许父组件为子组件传递模板和数据，从而提高组件的可复用性。
动态表单元素：作用域插槽可用于创建自定义的表单元素，如复杂的选择框、日期选择器和自定义输入控件。
自定义UI组件：通过作用域插槽，你可以将一些通用的UI组件的渲染逻辑放在子组件中，然后通过插槽向子组件传递不同的UI样式和内容。
组件通信：作用域插槽可用于实现组件之间的通信，父组件可以向子组件传递回调函数，以便子组件触发特定的操作。