vue 内置组件有哪些

Vue.js 框架提供了一些内置的全局组件，这些组件可以直接在任何 Vue 应用程序中使用而无需额外注册。以下是一些常用的 Vue 内置组件：

1. slot - 用于内容分发，在组件内部定义插槽区域，允许父组件向这些区域插入内容。
2. template - 不渲染任何实际的 DOM 元素，而是作为一个占位符用于组合多个节点或组件，常用于条件渲染或列表渲染的模板。
3. component - 动态组件，用于根据表达式的值渲染不同的组件实例。
4. keep-alive - 用于缓存组件，避免重复渲染和销毁过程，提高性能。
5. transition - 单个元素/组件的过渡效果，可以控制元素的进入和离开动画。
6. transition-group - 对一组元素的过渡效果，可以控制列表项的进入、离开以及排序动画。

这些组件的使用方式如下：

Slot

<my-component>
  <template v-slot:header>
    <h1>我是头部</h1>
  </template>
  默认插槽内容
</my-component>

Template

<template v-if="show">
  <div>仅在 show 为真时渲染</div>
</template>

Component

<component :is="currentComponent"></component>

其中 currentComponent 是一个包含组件名称或构造函数的表达式。

KeepAlive

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

这里 view 是当前要显示的组件名称或构造函数。

Transition

<transition name="fade">
  <p v-if="show">Hello World</p>
</transition>

这会在元素显示或隐藏时触发名为 fade 的过渡效果。

TransitionGroup

<transition-group name="list" tag="p">
  <span v-for="item in items" :key="item">{{ item }}</span>
</transition-group>

这将在列表项添加、移除或重新排序时触发过渡效果。

这些内置组件为 Vue 应用程序提供了强大的功能，使得开发者可以更容易地构建复杂且动态的界面。