vue的内置组件有什么

Vue.js 提供了一系列内置组件，这些组件可以帮助开发者更高效地构建应用程序。1、<component>、2、<transition>、3、<transition-group>、4、<keep-alive>、5、<slot>、6、<template>、7、<teleport>。这些内置组件分别有其特定的用途和功能，有助于开发者在不同场景下实现更复杂的功能。

一、``

<component> 是一个动态组件，用于根据动态绑定的值来渲染不同的组件。它的核心作用是根据状态或数据来动态切换组件。

• 使用方法：

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

• 示例：

  <template>
  
    <div>
      <button @click="currentComponent = 'compA'">Component A</button>
      <button @click="currentComponent = 'compB'">Component B</button>
      <component :is="currentComponent"></component>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        currentComponent: 'compA'
      }
    },
    components: {
      compA: { template: '<div>Component A</div>' },
      compB: { template: '<div>Component B</div>' }
    }
  }
  </script>
  

二、``

<transition> 组件用于给元素或组件添加过渡效果。它可以应用于条件渲染 (v-if) 或动态组件 (<component>)。

• 使用方法：

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

• 示例：

  <template>
  
    <div>
      <button @click="show = !show">Toggle</button>
      <transition name="fade">
        <p v-if="show">Fade In and Out</p>
      </transition>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        show: true
      }
    }
  }
  </script>
  <style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity 1s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  </style>
  

三、``

<transition-group> 组件用于对一组元素或组件应用过渡效果，通常用于列表的添加和删除操作。

• 使用方法：

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

• 示例：

  <template>
  
    <div>
      <button @click="addItem">Add Item</button>
      <transition-group name="list" tag="div">
        <div v-for="item in items" :key="item.id">{{ item.text }}</div>
      </transition-group>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        items: [
          { id: 1, text: 'Item 1' },
          { id: 2, text: 'Item 2' }
        ]
      }
    },
    methods: {
      addItem() {
        const newItem = { id: Date.now(), text: `Item ${this.items.length + 1}` }
        this.items.push(newItem)
      }
    }
  }
  </script>
  <style>
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }
  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
  </style>
  

四、``

<keep-alive> 组件用于缓存动态组件实例，避免重复渲染，提升性能。通常与 <component> 结合使用。

• 使用方法：

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

• 示例：

  <template>
  
    <div>
      <button @click="currentComponent = 'compA'">Component A</button>
      <button @click="currentComponent = 'compB'">Component B</button>
      <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        currentComponent: 'compA'
      }
    },
    components: {
      compA: { template: '<div>Component A</div>' },
      compB: { template: '<div>Component B</div>' }
    }
  }
  </script>
  

五、``

<slot> 组件用于在父组件中分发内容至子组件的插槽中。它使得组件更加灵活和可复用。

• 使用方法：

  <slot></slot>
  
  

• 示例：

  <template>
  
    <div>
      <child-component>
        <template v-slot:default>
          <p>This is inserted into the slot</p>
        </template>
      </child-component>
    </div>
  </template>
  <script>
  export default {
    components: {
      childComponent: {
        template: '<div><slot></slot></div>'
      }
    }
  }
  </script>
  

六、`