javascript Web 组件，将数据传入和传出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50404970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Web Components, pass data to and from
提问by Johan Lundquist
My understanding is that data is passed to a custom html element via its attributes and sent out by dispatching a CustomEvent.
我的理解是数据通过其属性传递给自定义 html 元素，并通过调度 CustomEvent 发送出去。
JavaScript objects can obviously be sent out in the event's detailfield, but what if the element needs a lot of data passed into it. Is there a way to provide it with an object in JavaScript.
JavaScript 对象显然可以在事件的详细信息字段中发送出去，但是如果元素需要向其中传递大量数据呢？有没有办法在 JavaScript 中为它提供一个对象。
What if the element for instance contains a variable number of parts that needs to be initialized or changed dynamically (e.g. a table with a variable number of rows)? I can imagine setting and modifying an attribute consisting of a JSON string that is parsed inside the component, but it does not feel like an elegant way to proceed:
例如，如果元素包含需要动态初始化或更改的可变数量的部分（例如，具有可变行数的表）怎么办？我可以想象设置和修改由在组件内部解析的 JSON 字符串组成的属性，但这并不像是一种优雅的处理方式：
<my-element tableRowProperties="[{p1:'v1', p2:'v2'}, {p1:'v1',p2:'v2'}, {p1:'v1',p2:'v2'}]"></my-element>
Or can you make the element listen to events from the outside that contains a payload of data?
或者您可以让元素侦听来自外部的包含数据负载的事件吗？
回答by Intervalia
Passing Data In
传入数据
If you really want/need to pass large amounts of data into your component then you can do it four different ways:
如果您真的想要/需要将大量数据传递到您的组件中，那么您可以通过四种不同的方式做到这一点：
1) Use a property.This is the simplest since you just pass in the Object by giving the value to the element like this: el.data = myObj;
1)使用属性。这是最简单的，因为您只需通过为元素提供值来传递对象，如下所示：el.data = myObj;
2) Use an attribute.Personally I hate this way of doing it this way, but some frameworks require data to be passed in through attributes. This is similar to how you show in your question. <my-el data="[{a:1},{a:2}....]"></my-el>. Be careful to follow the rules related to escaping attribute values. If you use this method you will need to use JSON.parseon your attribute and that may fail. It can also get very ugly in the HTML to have the massive amount of data showing in a attribute.
2)使用属性。我个人很讨厌这种做法，但是有些框架需要通过属性传入数据。这类似于您在问题中的显示方式。<my-el data="[{a:1},{a:2}....]"></my-el>. 请注意遵守与转义属性值相关的规则。如果您使用此方法，您将需要JSON.parse在您的属性上使用，这可能会失败。在 HTML 中，在属性中显示大量数据也会变得非常难看。
3 Pass it in through child elements.Think of the <select>element with the <option>child elements. You can use any element type as children and they don't even need to be real elements. In your connectedCallbackfunction your code just grabs all of the children and convert the elements, their attributes or their content into the data your component needs.
3通过子元素传入。想想<select>带有<option>子元素的元素。您可以使用任何元素类型作为子元素，它们甚至不需要是真正的元素。在您的connectedCallback函数中，您的代码只是获取所有子元素并将元素、它们的属性或它们的内容转换为您的组件需要的数据。
4 Use Fetch.Provide a URL for your element to go get its own data. Think of <img src="imageUrl.png"/>. If your already has the data for your component then this might seem like a poor option. But the browser provides a cool feature of embedding data that is similar to option 2, above, but is handled automatically by the browser.
4使用提取。为您的元素提供一个 URL 以获取其自己的数据。想想<img src="imageUrl.png"/>。如果您已经拥有组件的数据，那么这似乎是一个糟糕的选择。但是浏览器提供了一个很酷的嵌入数据的功能，类似于上面的选项 2，但由浏览器自动处理。
Here is an example of using embedded data in an image:
以下是在图像中使用嵌入数据的示例：
img {
height: 32px;
width: 32px;
}<img src="data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 314.7 314.7'%3E%3Cstyle type='text/css'%3E .st0{fill:transparent;stroke:%23231F20;stroke-width:12;} .st1{fill:%23231F20;stroke:%23231F20;stroke-width:10;stroke-linejoin:round;stroke-miterlimit:10;} %3C/style%3E%3Cg%3E%3Ccircle class='st0' cx='157.3' cy='157.3' r='150.4'/%3E%3Cpolygon class='st1' points='108,76.1 248.7,157.3 108,238.6'/%3E%3C/g%3E%3C/svg%3E">And here is an example of using embedded data in a web component:
这是在 Web 组件中使用嵌入数据的示例：
function readSrc(el, url) {
var fetchHeaders = new Headers({
Accept: 'application/json'
});
var fetchOptions = {
cache: 'default',
headers: fetchHeaders,
method: 'GET',
mode: 'cors'
};
return fetch(url, fetchOptions).then(
(resp) => {
if (resp.ok) {
return resp.json();
}
else {
return {
error: true,
status: resp.status
}
}
}
).catch(
(err) => {
console.error(err);
}
);
}
class MyEl extends HTMLElement {
static get observedAttributes() {
return ['src'];
}
attributeChangedCallback(attrName, oldVal, newVal) {
if (oldVal !== newVal) {
this.innerHtml = '';
readSrc(this, newVal).then(
data => {
this.innerHTML = `<pre>
${JSON.stringify(data,0,2)}
</pre>`;
}
);
}
}
}
// Define our web component
customElements.define('my-el', MyEl);<!--
This component would go load its own data from "data.json"
<my-el src="data.json"></my-el>
<hr/>
The next component uses embedded data but still calls fetch as if it were a URL.
-->
<my-el src="data:json,[{"a":9},{"a":8},{"a":7}]"></my-el>You can do that same this using XHR, but if your browser supports Web Components then it probably supports fetch. And there are several good fetch polyfills if you really need one.
你可以使用 XHR 来做同样的事情，但如果你的浏览器支持 Web 组件，那么它可能支持 fetch。如果你真的需要的话，还有几个很好的 fetch polyfills。
The best advantage to using option 4 is that you canget your data from a URL andyou candirectly embed your data. And this is exactly how most pre-defined HTML elements, like <img>work.
使用选项4的最大优点是，你可以从一个网址让您的数据和您可以直接嵌入您的数据。这正是大多数预定义 HTML 元素的<img>工作方式。
UPDATE
更新
I did think of a 5th way to get JSON data into an object. That is by using a <template>tag within your component. This still required you to call JSON.parsebut it can clean up your code because you don't need to escape the JSON as much.
我确实想到了将 JSON 数据放入对象的第 5 种方法。那是通过<template>在组件中使用标签。这仍然需要您调用，JSON.parse但它可以清理您的代码，因为您不需要太多地转义 JSON。
class MyEl extends HTMLElement {
connectedCallback() {
var data;
try {
data = JSON.parse(this.children[0].content.textContent);
}
catch(ex) {
console.error(ex);
}
this.innerHTML = '';
var pre = document.createElement('pre');
pre.textContent = JSON.stringify(data,0,2);
this.appendChild(pre);
}
}
// Define our web component
customElements.define('my-el', MyEl);<my-el>
<template>[{"a":1},{"b":"<b>Hi!</b>"},{"c":"</template>"}]</template>
</my-el>Passing Data Out
传出数据
There are three ways to get data out of the component:
从组件中获取数据的方式有以下三种：
1) Read the value from a property. This is ideal since a property can be anything and would normally be in the format of the data you want. A property can return a string, an object, a number, etc.
1) 从属性中读取值。这是理想的，因为属性可以是任何东西，并且通常采用您想要的数据格式。属性可以返回字符串、对象、数字等。
2) Read an attribute. This requires the component to keep the attribute up to date and may not be optimal since all attributes are strings. So your user would need to know if they need to call JSON.parseon your value or not.
2) 读取属性。这要求组件保持属性最新，并且可能不是最佳的，因为所有属性都是字符串。所以你的用户需要知道他们是否需要调用JSON.parse你的价值。
3) Events. This is probably the most important thing to add to a component. Events should trigger when state changes in the component. Events should trigger based on user interactions and just to alert the user that something has happened or that something is available. Traditionally you would include the relevant data in your event. This reduces the amount of code the user of your component needs to write. Yes, they can still read properties or attributes, but if your events include all relevant data then they probably won't need to do anything extra.
3) 事件。这可能是添加到组件中最重要的事情。当组件中的状态改变时，事件应该被触发。事件应该基于用户交互触发，并且只是提醒用户发生了某些事情或某些事情可用。传统上，您会在事件中包含相关数据。这减少了组件用户需要编写的代码量。是的，他们仍然可以读取属性或属性，但是如果您的事件包含所有相关数据，那么他们可能不需要做任何额外的事情。
回答by logan
There is a 6th way that is really similar to @Intervalia's answer above but uses a <script>tag instead of a <template>tag.
第 6 种方式与上面@Intervalia 的答案非常相似，但使用<script>标签而不是<template>标签。
This is the same approach used by a Markdown Element.
这与Markdown Element使用的方法相同。
class MyEl extends HTMLElement {
connectedCallback() {
var data;
try {
data = JSON.parse(this.children[0].innerHTML);
}
catch(ex) {
console.error(ex);
}
this.innerHTML = '';
var pre = document.createElement('pre');
pre.textContent = JSON.stringify(data,0,2);
this.appendChild(pre);
}
}
// Define our web component
customElements.define('my-el', MyEl);<my-el>
<script type="application/json">[{"a":1},{"b":"<b>Hi!</b>"},{"c":"</template>"}]</script>
</my-el>回答by Sasha Firsov
If you are using Polymer based web components, the passing of data could be done by data binding. Data could be stored as JSON string within attribute of and passed via context variable.
如果您使用的是基于 Polymer 的 Web 组件，则数据的传递可以通过数据绑定来完成。数据可以存储为 JSON 字符串，并通过上下文变量传递。
<p>JSON Data passed via HTML attribute into context variable of and populating the variable into combobox.</p>
<dom-bind><template>
<iron-ajax url='data:text/json;charset=utf-8,
[{"label": "Hydrogen", "value": "H"}
,{"label": "Oxygen" , "value": "O"}
,{"label": "Carbon" , "value": "C"}
]'
last-response="{{lifeElements}}" auto handle-as="json"></iron-ajax>
<vaadin-combo-box id="cbDemo"
label="Label, value:[[cbDemoValue]]"
placeholder="Placeholder"
items="[[lifeElements]]"
value="{{ cbDemoValue }}"
>
<template>
[[index]]: [[item.label]] <b>[[item.value]]</b>
</template>
</vaadin-combo-box>
<vaadin-combo-box label="Disabled" disabled value="H" items="[[lifeElements]]"></vaadin-combo-box>
<vaadin-combo-box label="Read-only" readonly value="O" items="[[lifeElements]]"></vaadin-combo-box>
<web-elemens-loader selection="
@polymer/iron-ajax,
@vaadin/vaadin-element-mixin/vaadin-element-mixin,
@vaadin/vaadin-combo-box,
"></web-elemens-loader>
</template></dom-bind>
<script src="https://cdn.xml4jquery.com/web-elements-loader/build/esm-unbundled/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="https://cdn.xml4jquery.com/web-elements-loader/build/esm-unbundled/src/web-elemens-loader.js"></script>回答by vinyll
Using a tiny lib such as Legowould allow you to write the following:
使用像Lego这样的小库可以让你编写以下内容：
<my-element :tableRowProperties="[{p1:'v1', p2:'v2'}, {p1:'v1',p2:'v2'}, {p1:'v1',p2:'v2'}]"></my-element>
and within your my-element.htmlweb-component:
并在您的my-element.html网络组件中：
<template>
<table>
<tr :for="row in state.tableRowProperties">
<td>${row.p1}</td>
<td>${row.p2}</td>
</tr>
</template>
