vue3-动态组件的使用方式

281 阅读1分钟

vue3-动态组件的使用方式,

setup 语法糖中与 vue2 有一些差别

setup 语法糖中 component 组件的使用如下。

<keep-alive>
    <component :is="componentMap[stepComponent]" />
</keep-alive>
import Step0 from "./user-add/user-add-step1.vue"
import Step1 from "./user-add/user-add-step2.vue"
import Step2 from "./user-add/user-add-step3.vue"

// ts 声明类型,然后指定key值为字符串
type TypeCom={
  [key:string]:Component
}

const componentMap:TypeCom = {
  Step0: Step0,
  Step1: Step1,
  Step2: Step2
}