时间戳

首页 > 解决方案 > 显示组件数组中的组件

vue.js - 显示组件数组中的组件

问题描述

我想按名称从组件列表（或组件名称列表）中查找组件而不加载组件。例如：

const arr = [
  <ComponentA />,
  <ComponentB />
]

const selectedComponent = arr.find(component => component.name === 'ComponentA');

然后selectedComponent在 div 中渲染它。

<div>{selectedComponent}</div>

**注意：** 每个组件都有唯一的名称。

标签： vue.jsvuejs3

解决方案

您可以使用 adynamic component相反，它会像此示例一样加载您选择的组件名称

<component :is="component_name"></component>

并在您的数据中添加变量

data(){
  return {
   component_name: 'home'
 }
}

有关更多信息，请查看此处的文档

推荐阅读