component 标签

在 Vue 中，<component> 是一个内置的动态组件容器，用于根据数据动态渲染不同的组件。它的核心作用是通过 is 属性指定要渲染的组件，实现组件的灵活切换，常用于标签页、步骤条、动态表单等场景。

一、基本用法：通过 is 属性指定组件

<component> 标签的核心是 is 属性，通过它可以动态绑定要渲染的组件。is 的值可以是：

• 已注册的组件名称（字符串）
• 组件的选项对象（直接传入组件定义）

1. 静态绑定组件（固定渲染某个组件）

如果不需要动态切换，可直接通过 is 静态指定组件名称（需先注册组件）：

vue

<template>
  <!-- 静态渲染 ComponentA 组件 -->
  <component is="ComponentA"></component>
</template>

<script>
import ComponentA from './ComponentA.vue'

export default {
  components: { ComponentA } // 注册组件
}
</script>

2. 动态绑定组件（根据数据切换组件）

更常见的场景是通过 v-bind 动态绑定 is 的值，实现组件切换：

vue

<template>
  <div>
    <!-- 按钮切换组件 -->
    <button @click="currentComponent = 'ComponentA'">显示A</button>
    <button @click="currentComponent = 'ComponentB'">显示B</button>

    <!-- 动态渲染组件 -->
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentComponent: 'ComponentA' // 初始渲染 ComponentA
    }
  }
}
</script>

• 点击按钮时，currentComponent 的值改变，<component> 会自动销毁当前组件，渲染新组件。

二、传递 Props 和监听事件

动态组件和普通组件一样，可以传递 props 和监听事件，用法与直接使用组件相同：

vue

<template>
  <component
    :is="currentComponent"
    :title="pageTitle"  <!-- 传递 props -->
    :list="itemList"
    @handleClick="handleComponentClick"  <!-- 监听事件 -->
  ></component>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentComponent: 'ComponentA',
      pageTitle: '动态组件示例',
      itemList: [1, 2, 3]
    }
  },
  methods: {
    handleComponentClick(data) {
      console.log('收到组件事件：', data)
    }
  }
}
</script>

• 子组件（如 ComponentA）中需声明 props 接收数据，并通过 $emit 触发事件。

三、结合 <keep-alive> 缓存组件状态

当动态组件需要保留状态（如表单输入、滚动位置）时，可将 <component> 包裹在 <keep-alive> 中，避免组件切换时重复创建 / 销毁：

vue

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示A</button>
    <button @click="currentComponent = 'ComponentB'">显示B</button>

    <!-- 缓存动态组件 -->
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

• 被缓存的组件切换时，不会触发 created、mounted 等初始化钩子，而是触发 <keep-alive> 专属的 activated 和 deactivated 钩子（详见之前的 <keep-alive> 讲解）。

四、特殊用法：渲染内置组件或 HTML 元素

is 属性不仅可以渲染自定义组件，还能渲染 Vue 内置组件（如 <transition>、<router-view>）或原生 HTML 元素（如 <div>、<span>）。

1. 渲染 HTML 元素

在 <template> 中直接写 <table><tr><td></td></tr></table> 是合法的，但如果想动态渲染 <tr> 等元素（受 HTML 解析规则限制），可通过 <component> 实现：

vue

<template>
  <table>
    <tbody>
      <!-- 动态渲染 tr 元素 -->
      <component is="tr">
        <td>动态渲染的表格行</td>
      </component>
    </tbody>
  </table>
</template>

2. 渲染 Vue 内置组件

例如动态切换路由视图或过渡效果：

vue

<template>
  <!-- 动态渲染 router-view（路由组件） -->
  <component is="router-view"></component>

  <!-- 结合 transition 动态切换过渡效果 -->
  <component
    is="transition"
    name="fade"
  >
    <div v-if="show">动态过渡内容</div>
  </component>
</template>

五、Vue3 中的特殊注意事项

1. 在 <script setup> 中使用
   在 <script setup> 中，导入的组件无需显式注册，可直接通过组件名绑定到 is 上：

   vue

   <template>
     <component :is="currentComponent"></component>
   </template>
   
   <script setup>
   import ComponentA from './ComponentA.vue'
   import ComponentB from './ComponentB.vue'
   import { ref } from 'vue'
   
   const currentComponent = ref(ComponentA) // 直接绑定组件对象
   </script>
   

    
   • 此时 currentComponent 可以直接绑定组件对象（无需字符串名称），更直观。

2. 异步组件的动态渲染
   结合 defineAsyncComponent 动态渲染异步组件：

   vue

   <template>
     <component :is="asyncComponent"></component>
   </template>
   
   <script setup>
   import { defineAsyncComponent, ref } from 'vue'
   
   // 定义异步组件
   const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))
   const asyncComponent = ref(AsyncComponent)
   </script>
   

六、注意事项

1. 组件名称匹配规则

   • 当 is 的值为字符串时，Vue 会优先匹配全局注册的组件，再匹配局部注册的组件。
   • 若组件名包含大写字母（如 ComponentA），在模板中需用短横线命名法（component-a），或直接使用组件对象（Vue3 推荐）。

2. 性能考量

   • 频繁切换未被缓存的组件会导致频繁创建 / 销毁实例，可能影响性能，建议结合 <keep-alive> 使用。
   • 避免在 <component> 上绑定过多动态属性，减少不必要的重渲染。

3. 与 v-if/v-for 配合

   • 不要在 <component> 上同时使用 v-for（可能导致 key 冲突），如需循环渲染多个动态组件，可在外层包裹 <template v-for>。

总结

<component> 是 Vue 实现组件动态化的核心工具，通过 is 属性灵活切换组件，适用于需要根据状态动态展示不同内容的场景（如标签页、步骤表单、权限动态渲染等）。结合 <keep-alive> 可优化性能，保留组件状态；配合 Props 和事件传递，能实现完整的组件交互逻辑。