Vaadin Flow：组件和元素之间的区别

Question

在Vaadin Flow中除了组件(Component)外，现在还有元素(Elements)。

在Element的javadoc中指出：

“Component是对一个元素(Element)或一组元素层次结构的更高级别抽象。”

这句话实际上是什么意思？在这个更高的级别上做了什么，何时使用元素和何时使用组件呢？

- olivmir

Answer 1

作为一个实际的例子，让我们考虑HTML标记<input>。你可以创建一个服务器端的Element实例，在浏览器中将其呈现为<input>，代码为 Element myElement = new Element("input")。

此外，假设您想要配置元素的占位文本，例如：<input placeholder="在此输入姓名">。使用Element API，这可以通过 myElement.setAttribute("placeholder", "在此输入姓名") 实现。

最后，您还需要添加一个监听器，将值更改事件转发到服务器。您还需要配置要将哪些部分的浏览器事件发送到服务器，并在监听器中访问该值：myElement.addEventListener("change", event -> System.out.println("新值：" + event.getEventData("element.value")).addEventData("element.value");。

你可以以这种方式构建整个应用程序，但这并不方便。你想要一个类来知道标记名称是input，而无需每次键入该字符串。你想要一个setPlaceholder方法，而不是使用通用的setAttribute并记住属性的名称。最后，你需要一种方式来添加一个值改变的监听器，其中新值可以作为event.getValue()获得。

这正是Component的用处。它允许你创建一个Input类来扩展Component，为这些特性提供了Java API。在底层，Input组件将使用Element API，但将其隐藏为实现细节，Input类的用户不必知道它们。

此外，组件也可以基于其他组件而不是直接使用Element。这通常是您创建应用程序视图中的组件的方式。

- Leif Åstrand