如何使用 vuejs 嵌套组件？答案

【问题标题】：How do I nest components with vuejs?如何使用 vuejs 嵌套组件？
【发布时间】：2021-01-07 03:55:28
【问题描述】：

我是 vue 新手，正在尝试将老式的 boostrap 应用程序移植到 BS5 + vue3 模型。我正在尝试重新创建：https://www.screencast.com/t/ZfnE60z4cR8 基于从 api 中提取的 json 对象。目前它是 4 个嵌套的对象数组（保留排序的数组），但如果这不是最佳的，我可以更改为我需要的任何结构。简而言之，设施包含空间，设备包含数据点（温度、湿度等）。有警报和其他条件，但目前我只是想弄清楚如何渲染基本结构。我有一种预感，组件最有意义，我得到了渲染的设施，但是我如何渲染这些容器内的空间，然后是设备和它们的每个相关数据点（我假设这将是同一个组件传递一个名称、值和单位 - 如 %rH、华氏度等）

    <div id="db">
        <facility-block v-for="facility in facilities" :name="facility.name">
            <space-block v-for="space in facilities.spaces" :name="space.name">
                
            </space-block>
        </facility-block>
    </div>

这是一支笔：https://codepen.io/daemach/pen/abNQdoq

【问题讨论】：

标签： vue.js vue-component vuejs3

【解决方案1】：

我认为您只是针对错误的变量。而不是facilities.spaces，您可能正在寻找facility.spaces

<div id="db">
    <facility-block v-for="facility in facilities" :name="facility.name">
        <space-block v-for="space in facility.spaces" :name="space.name">
        </space-block>
    </facility-block>
</div>

【讨论】：