适用于 IoT 和创客的 SVG 网页组件（第 2 部分）

Desknumber

在设计物联网网页界面时，总是有多种选择。在本文的前一部分中，Richard Leddy 阐述了 IoT 的含义以及如何使用  托管 IoT 人机界面组。今天，让我们仔细看看延迟加载面板以及如何保持 Vue 状态与设备同步。因此，我们已经有了动态加载 SVG 图标菜单的方法，如果我们愿意的话，可

以通过加载面板来做出反应，但图标不是实际的组件。我们能够使用一个简单的技巧，为每个图标引入 SVG 并将其传递到 Vue 应用程序中。生成一个图标列表非常简单，除了小的数据差异外，每个图标都以 电子邮件营销列表 类似的方式做出反应。数据差异使得将面板的名称绑定到每个图标成为可能，以便图标按钮单击的处理程序可以传递它。

当面板以 Vue 组件的形式加载时，有关面板及其组件的所有内容都必须加载，包括模板、JavaScript 等等。因此，管理加载面板的工作比我们迄今为止在本次讨论中遇到的工作要大。



让我们看看 Vue 为异步加载提供钩子的方式。以下片段来自 Vue指南。

复制该指南告诉我们 函数是如何使用 Vue 组件同步性的示例。请注意，之前有一个对象作为 的第二个参数，现在有一个函数，称为工厂函数。回调中resolve是一个组件定义，它是之前的第二个参数。

了解Smashing Email Newsletter，其中包含有关前端、设计和用户体验的有用提示。订阅并获取“智能界面设计清单” ——一个免费的 PDF 资料库，其中包含 150 多个问题，供您在设计和构建几乎任何东西时询问自己。

你的邮件一个星期一次。关于前端和用户体验的有用技巧。受到 190,000 友好人士的信赖。

功能面板所以，我不得不盯着这个例子一段时间，然后它才对我有意义。这是另一个更适合我的例子：

复制制作一个更通用的函数来围绕这种形式似乎是正确的做法。