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

最新推荐文章于 2024-11-12 15:20:58 发布

原创最新推荐文章于 2024-11-12 15:20:58 发布 · 4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue3.0 专栏收录该内容

36 篇文章

订阅专栏

文章介绍了如何在Vue中使用<component>元素并通过is特性实现动态组件渲染，包括单组件的静态引用和v-for循环下组件的动态加载示例。

前言

在 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组件信息"
 }
])