当前位置：首页 > VUE

vue插槽实现组件切换

2026-02-24 21:21:30VUE

使用插槽实现组件切换的方法

在Vue中，可以通过插槽（Slot）动态切换组件内容。插槽允许父组件向子组件传递模板片段，实现灵活的组件组合。

基本插槽切换

定义子组件时使用<slot>作为占位符：

<!-- ChildComponent.vue -->
<template>
  <div class="container">
    <slot></slot>
  </div>
</template>

父组件传入不同内容实现切换：

<ChildComponent>
  <ComponentA v-if="showComponentA"/>
  <ComponentB v-else/>
</ChildComponent>

具名插槽切换

当需要多个插槽时，使用具名插槽：

vue插槽实现组件切换

<!-- LayoutComponent.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot name="content"></slot>
    </main>
  </div>
</template>

父组件指定不同插槽内容：

<LayoutComponent>
  <template v-slot:header>
    <Navigation v-if="useDefaultNav"/>
    <CustomNavigation v-else/>
  </template>

  <template v-slot:content>
    <MainContent :key="contentKey"/>
  </template>
</LayoutComponent>

作用域插槽实现动态切换

子组件通过作用域插槽暴露数据：

vue插槽实现组件切换

<!-- DataComponent.vue -->
<template>
  <div>
    <slot :data="internalData"></slot>
  </div>
</template>

父组件根据数据决定渲染内容：

<DataComponent v-slot="{ data }">
  <ChartComponent v-if="data.type === 'chart'" :data="data"/>
  <TableComponent v-else-if="data.type === 'table'" :items="data.items"/>
  <DefaultComponent v-else/>
</DataComponent>

保持组件状态

使用<keep-alive>缓存动态组件：

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

动态组件与插槽结合

结合<component>和插槽实现高级切换：

<template>
  <component :is="layoutComponent">
    <template v-slot:default>
      <DynamicContent :type="contentType"/>
    </template>
  </component>
</template>

这种方法适用于需要根据条件同时切换布局和内容的场景。