Javascript Web组件，向和从Web组件传递数据

我的理解是，数据通过其属性传递给自定义html元素，并通过调度CustomEvent发送出去

JavaScript对象显然可以在事件的detail字段中发送，但是如果元素需要传递大量数据，该怎么办呢。有没有一种方法可以在JavaScript中为它提供一个对象

例如，如果元素包含需要动态初始化或更改的可变数量的部分（例如，具有可变行数的表），该怎么办？我可以想象设置和修改一个由组件内部解析的JSON字符串组成的属性，但这并不是一种优雅的方式：

<my-element tableRowProperties="[{p1:'v1', p2:'v2'}, {p1:'v1',p2:'v2'}, {p1:'v1',p2:'v2'}]"></my-element>

或者，您可以让元素侦听来自外部的事件，这些事件包含数据负载吗？

传入数据 如果您确实希望/需要将大量数据传递到组件中，则可以采用四种不同的方式：

1） 使用属性。这是最简单的，因为您只需通过如下方式向元素提供值来传入对象：

el.data=myObj

2） 使用属性。我个人不喜欢这样做，但有些框架要求通过属性传递数据。这与你在问题中的表现类似<代码>

。注意遵守与此相关的规则。如果使用此方法，则需要在属性上使用

JSON.parse

，这可能会失败。在HTML中，在属性中显示大量数据也会变得非常丑陋

3通过子元素传递它。考虑

元素和

子元素。您可以使用任何元素类型作为子元素，它们甚至不需要是真正的元素。在

connectedCallback

函数中，您的代码只需获取所有子元素，并将元素、它们的属性或它们的内容转换为组件所需的数据

4使用Fetch。为元素提供一个URL，以获取其自己的数据。想想

。如果您已经拥有组件的数据，那么这似乎是一个糟糕的选择。但是浏览器提供了一个很酷的嵌入数据的功能，类似于上面的选项2，但是由浏览器自动处理

以下是在图像中使用嵌入数据的示例：

img{
高度：32px；
宽度：32px；
}

---

第六种方法与@Intervalia上面的答案非常相似，但是使用了

标记而不是

标记

这与我们使用的方法相同

类MyEl扩展HtmleElement{
connectedCallback（）{
var数据；
试一试{
data=JSON.parse（this.children[0].innerHTML）；
}
捕获（ex）{
控制台错误（ex）；
}
this.innerHTML=''；
var pre=document.createElement（'pre'）；
pre.textContent=JSON.stringify（数据，0,2）；
这是我的孩子（学前）；
}
}
//定义我们的web组件
自定义元素。定义（'my-el'，MyEl）

[{“a”：1}，{“b”：“嗨！”}，{“c”：“}]
如果您使用的是基于聚合物的web组件，则可以通过数据绑定来传递数据。数据可以作为JSON字符串存储在的属性中，并通过上下文变量传递


通过HTML属性将JSON数据传递到的上下文变量中，并将该变量填充到combobox中。

[[index]]：[[item.label][[item.value]]
使用一个很小的库，例如，可以让您编写以下内容：



在my-element.html web组件中：


${row.p1}
${row.p2}
通过调用自定义元素的方法或属性的ione，您可以向自定义元素传递数据或从自定义元素获取数据。太棒了！当然这是我需要掌握web组件有用性的缺失部分（尽管很明显）。我觉得它们可以完全取代使用jQuery小部件工厂的需要，但直到现在才真正了解如何使用。谢谢欢迎您：-）这里的示例您可以使用EHTML中的e-form元素：