Vue3 循环生成的动态组件component定义并传值

前言

在 Vue 中使用动态组件，可以使用 <component>元素，并通过 is 特性绑定一个组件的名称或组件对象。通过在父组件中改变 is 特性的值，可以动态切换渲染的组件。

举例说明
例子1： 单组件渲染
parent.vue

 <div class="grid-container">
   <component :is="componentName"  :message="message"/>
 </div>

import {ref} from "vue";
import Acomponent from '@/components/Acomponent.vue'
//这里需要定义组件
const componentName = ref(Acomponent)
const message = ref("我是来自动态组件信息");

例子2： v-for循环动态组件渲染
parent.vue

 <div class="grid-container">
  <component v-for="itemInner in childMenu" :class="itemInner.className" :is="itemInner.componentName"  :message="itemInner.message"/>
</div>

import {reactive, shallowRef} from "vue";
import Acomponent from '@/components/Acomponent.vue'
import Bcomponent from '@/components/Bcomponent.vue'
const  childMenu = reactive([
 {
    componentName:shallowRef(Acomponent), //这里需要用shallowRef定义组件
    message: "传递给A组件信息"
 },
  {
    componentName:shallowRef(Bcomponent),
    message: "传递给B组件信息"
 }
])