14vue3内置组件的功能介绍与用法

1. <component> - 动态组件（组件变身器）

<template>
  <component :is="currentComponent" />
</template>
<script setup>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

const currentComponent = ref('ComponentA') // 可以切换为 ComponentB
</script>

通俗理解：可以根据条件切换显示不同的组件，就像给你的页面加了个“变形按钮”。

2. <Transition> - 过渡动画（优雅的入场退场）

1. Transition 的 6 个类名：

   • v-enter-from：进入前

   • v-enter-active：进入中

   • v-enter-to：进入后

   • v-leave-from：离开前

   • v-leave-active：离开中

   • v-leave-to：离开后

<template>
  <button @click="show = !show">切换</button>
  
  <Transition name="fade">
    <p v-if="show">我会淡入淡出</p>
  </Transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

通俗理解：给元素的显示/隐藏加上动画效果，就像电影里的淡入淡出。

3. <TransitionGroup> - 列表过渡（集体舞动画）

<template>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </TransitionGroup>
</template>

通俗理解：当列表元素增加、删除或移动时，给所有元素加动画，就像排队的人有秩序地移动。

4. <KeepAlive> - 组件缓存（记忆组件）

<template>
  <KeepAlive>
    <component :is="currentTab" />
  </KeepAlive>
</template>

通俗理解：切换组件时保留它的状态（比如表单输入的内容），而不是每次都重新创建。

5. <Teleport> - 传送门（任意门）

<template>
  <button @click="showModal = true">打开弹窗</button>
  
  <!-- 把弹窗传送到 body 下 -->
  <Teleport to="body">
    <div v-if="showModal" class="modal">
      我是一个弹窗
    </div>
  </Teleport>
</template>

通俗理解：可以把组件渲染到 DOM 的任意位置，比如把弹窗放到页面最外层，避免样式冲突。

6. <Suspense> - 异步组件（加载状态处理）

<template>
  <Suspense>
    <!-- 加载完成的组件 -->
    <template #default>
      <AsyncComponent />
    </template>
    
    <!-- 加载中的状态 -->
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)
</script>

通俗理解：优雅地处理异步组件的加载状态，在组件加载完成前显示 loading 效果。

7. <slot> - 插槽（组件的内容占位符）

<!-- Child.vue -->
<template>
  <div class="card">
    <slot name="header"></slot>
    <slot>默认内容</slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- Parent.vue -->
<template>
  <Child>
    <template #header>
      <h2>这是标题</h2>
    </template>
    
    <p>这是主要内容</p>
    
    <template #footer>
      <button>确定</button>
    </template>
  </Child>
</template>

通俗理解：允许父组件向子组件传递 HTML 结构，就像给组件开几个“窗口”，让外面可以放东西进来。