洞悉Vue插槽：一文全解

Vue.js 插槽：在组件间灵活分发内容

什么是插槽？

Vue.js 的插槽是一种特殊 HTML 元素，允许组件之间分发内容。它们使用 <slot> 标签定义，可以包含任意 HTML 代码。通过向插槽填充内容，我们可以在组件中定义占位符，并根据具体情况进行定制。

插槽类型

Vue.js 提供两种插槽类型：具名插槽和默认插槽。

• 具名插槽： 通过指定一个名称，允许我们在父组件视图模板中使用 v-slot 指令填充内容。

<!-- 定义具名插槽 -->
<template>
  <div>
    <slot name="header"></slot>
  </div>
</template>

<!-- 在父组件中填充具名插槽 -->
<template>
  <div>
    <my-component>
      <template v-slot:header>
        <h1>这是页眉</h1>
      </template>
    </my-component>
  </div>
</template>

• 默认插槽： 在不指定名称的情况下创建，允许我们在父组件视图模板中直接填充内容，无需 v-slot 指令。

<!-- 定义默认插槽 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- 在父组件中填充默认插槽 -->
<template>
  <div>
    <my-component>
      这是默认插槽内容
    </my-component>
  </div>
</template>

插槽用途

插槽在以下场景中有广泛用途：

• 创建可重用组件： 构建可重用组件，根据具体需求进行定制。例如，创建一个“页眉”组件，它包含网站的标题栏，然后可在网站各个页面中重复使用，无需重复编写标题栏代码。

• 在组件间共享数据： 通过插槽，组件间可以共享数据。比如，创建一个“用户资料”组件，包含用户的个人信息，然后可在网站多个页面中使用，无需在各个页面复制粘贴个人信息。

• 创建动态内容： 利用插槽创建动态内容。例如，创建一个“新闻动态”组件，它展示网站的最新新闻。然后可在网站首页使用“新闻动态”组件，而无需手动更新新闻列表。

示例代码

下面的代码示例展示了如何使用具名插槽：

// 子组件：ChildComponent.vue
<template>
  <div>
    <h1>{{ header }}</h1>
    <p>{{ body }}</p>
  </div>
</template>

<script>
export default {
  props: ['header', 'body']
}
</script>

// 父组件：ParentComponent.vue
<template>
  <div>
    <child-component>
      <template v-slot:header>
        <h2>这是子组件的页眉</h2>
      </template>
      <template v-slot:body>
        <p>这是子组件的主体内容</p>
      </template>
    </child-component>
  </div>
</template>

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

常见问题解答

1. 如何创建插槽？

   • 使用 <slot> 标签定义插槽。

2. 如何在父组件中填充插槽？

   • 具名插槽：使用 v-slot 指令，指定要填充的插槽名称。
   • 默认插槽：直接填充插槽内容，无需 v-slot 指令。

3. 可以为插槽传递 props 吗？

   • 可以，使用 v-bind 指令将 props 绑定到插槽中。

4. 如何从插槽中访问父组件数据？

   • 在子组件中，使用 this.$parent 访问父组件数据。

5. 有哪些其他方式使用插槽？

   • 通过 scoped slots 传递作用域数据；
   • 使用 v-slot 指令在插槽内使用父组件的插槽 API。