Vue3 Built-in Components

In Vue.js, there are some built-in global components and built-in components that provide common functionality and layout support, helping developers quickly build application interfaces.

The following are some common Vue built-in components and their functions:

1. component

<component>It is an abstract component used to dynamically render different components or elements.

By bindingisthe attribute, switching and rendering of dynamic components can be achieved.

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

2. transitionandtransition-group

<transition>and<transition-group>Provides the functionality to implement transitions and animations in Vue.js.

By defining CSS class names for transitions, you can control the animation effects of elements when they enter or leave the DOM.

<transition name="fade">
  <div v-if="show">Hello!</div>
</transition>

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

3. keep-alive

<keep-alive>It is an abstract component used to preserve component state or avoid multiple re-renders.

When a component is<keep-alive>wrapped, its state will be cached instead of being re-rendered on every switch.

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

4. slot

<slot>It is a slot component in Vue.js used for inserting content. It allows a parent component to pass content into specific slot positions within a child component, making components more flexible and reusable.

<child-component>
  <template #header>
    <h2>Header Content</h2>
  </template>
  <template #default>
    <p>Default Content</p>
  </template>
</child-component>

5. teleport

<teleport>Allows you to render DOM elements anywhere in the application, without being limited by the current DOM structure. This is very useful when you need to dynamically move elements in the application, such as rendering popup content in a modal box.

<teleport to="body">
  <modal-dialog v-if="showModal">
    <!-- modal content -->
  </modal-dialog>
</teleport>

6. Suspense

<Suspense>It is a component newly added in Vue.js 3.x, used to handle the loading and status of asynchronous components. It can display placeholder content before the asynchronous component finishes loading, and handle loading states and errors.

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>