Vue 中 slot (插槽)是什么？多次声明同个插槽会怎样？-51CTO.COM

在 Vue 中，插槽（slot）是一种内容分发机制，它允许你在组件内部预留一个“空白区域”，以便父组件在使用该子组件时传入任意的内容。这种机制使得组件更灵活、更具可复用性，能够满足不同场景下的自定义需求。

主要作用

内容分发
插槽允许父组件将模板或内容传递到子组件中，这样子组件就可以展示父组件提供的内容，而不必事先固定好显示什么。
提高组件复用性
通过插槽，组件可以作为容器组件使用，而具体的内容由使用该组件的父组件决定，使得组件更加灵活和通用。
支持具名插槽和作用域插槽

默认插槽：没有 name 属性的插槽，父组件传入的内容会填充到默认插槽中。
具名插槽：通过 name 属性标识的插槽，允许在一个组件中定义多个插槽，父组件可以根据名字将内容插入到相应的位置。
作用域插槽：允许子组件将数据“暴露”给父组件，父组件可以使用这些数据来动态渲染内容，这对于创建灵活的组件非常有用。

使用示例

1. 默认插槽

子组件（MyComponent.vue）：

<template>
  <div class="container">
    <slot></slot>
  </div>
</template>1.
2.
3.
4.
5.

父组件：

<template>
  <MyComponent>
    <p>这段内容会显示在 MyComponent 的插槽中</p>
  </MyComponent>
</template>1.
2.
3.
4.
5.

2. 具名插槽

子组件：

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

父组件：

<template>
  <MyComponent>
    <template v-slot:header>
      <h1>这是标题</h1>
    </template>
    <p>这是主体内容</p>
    <template v-slot:footer>
      <small>这是页脚</small>
    </template>
  </MyComponent>
</template>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

3. 作用域插槽

子组件：

<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: "Alice", age: 30 }
    };
  }
}
</script>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

父组件：

<template>
  <MyComponent v-slot:default="slotProps">
    <p>用户名称：{{ slotProps.user.name }}</p>
    <p>用户年龄：{{ slotProps.user.age }}</p>
  </MyComponent>
</template>1.
2.
3.
4.
5.
6.

总结

插槽（slot） 是 Vue 中实现内容分发的机制，让子组件预留出内容占位符，父组件则负责填充内容。
它提高了组件的灵活性和复用性，使组件可以根据不同的场景展示不同的内容。
Vue 支持默认插槽、具名插槽和作用域插槽，这为复杂场景下的组件组合提供了极大的灵活性。

这种机制在实际开发中非常有用，例如构建 UI 框架组件、布局容器组件等，都可以利用插槽来实现高度可定制的效果。

如果一个组件内有多个默认插槽，它会怎么样

在 Vue 中，插槽默认的名称是 default，如果你在一个组件内放置了多个没有指定 name 的 <slot> 标签，Vue 会将它们都视作同一个默认插槽的多个插入点。

这意味着：

父组件传入的默认插槽内容会被复制到每个默认插槽的位置中，即同一份内容会渲染多次。
Vue 不会报错，但这通常不是你想要的行为，因为内容重复可能导致意外的 UI 显示。

示例：

<!-- MyComponent.vue -->
<template>
  <div>
    <slot></slot>  <!-- 第一个默认插槽 -->
    <slot></slot>  <!-- 第二个默认插槽 -->
  </div>
</template>1.
2.
3.
4.
5.
6.
7.

如果父组件这样使用：

<MyComponent>
  <p>Hello, Vue!</p>
</MyComponent>1.
2.
3.

最终页面将渲染两次 <p>Hello, Vue!</p>，即内容会在每个默认插槽中显示。

建议：
如果需要在组件中定义多个内容分发点，推荐使用具名插槽来区分不同区域，这样可以更明确地控制每个插槽中显示的内容。

Vue 中 slot (插槽)是什么？ 多次声明同个插槽会怎样？

主要作用

使用示例

1. 默认插槽

2. 具名插槽

3. 作用域插槽

总结

如果一个组件内有多个默认插槽，它会怎么样

Vue 中 slot (插槽)是什么？多次声明同个插槽会怎样？