vuejs如何嵌套组件？

Question

我是 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

Answer 1

我认为您定位的变量不对。您可能正在寻找 facility.spaces

而不是 facilities.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>

vuejs如何嵌套组件？

How do I nest components with vuejs?

vue.js

vue-component

vuejs3