Vue3中<component>组件的使用-CFANZ编程社区

Vue3中<component>组件的使用_加载

在Vue3中，可以使用<component>组件来实现动态组件的加载，其使用方式如下：

在setup函数中引入defineComponent函数：

import { defineComponent } from 'vue'

在setup函数中定义组件：

const ComponentA = defineComponent({
  template: `
    <div>Component A</div>
  `
})
const ComponentB = defineComponent({
  template: `
    <div>Component B</div>
  `
})

在模板中使用<component>组件，并动态绑定组件名：

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

在setup函数中定义变量currentComponent，并根据需要动态修改组件名：

setup() {
  const currentComponent = ref('ComponentA')

  const toggleComponent = () => {
    currentComponent.value = currentComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA'
  }

  return {
    currentComponent,
    toggleComponent
  }
}

这样就可以实现在一个组件中动态地加载不同的子组件。