Web组件，往返于数据之间的传递 [英] Web Components, pass data to and from
问题描述
我的理解是，数据通过其属性传递到自定义html元素，并通过调度CustomEvent发送出去.
My understanding is that data is passed to a custom html element via its attributes and sent out by dispatching a CustomEvent.
JavaScript对象显然可以在事件的 detail 字段中发出，但是如果元素需要将大量数据传递到该元素中该怎么办.有没有一种方法可以使用JavaScript为它提供一个对象.
JavaScript objects can obviously be sent out in the event's detail field, 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.
例如，如果元素包含可变数量的需要动态初始化或更改的部分(例如，具有可变行数的表)怎么办?我可以想象设置和修改一个由在组件内部解析的JSON字符串组成的属性，但这并不像一种优雅的方式进行处理:
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:
<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?
推荐答案
将数据传入
如果您确实希望/需要将大量数据传递到组件中，则可以通过四种不同的方法来做到这一点:
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)使用属性.这是最简单的方法，因为您只是通过将像这样的元素赋值给对象来传递对象:el.data = myObj;
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;
2)使用属性.我个人讨厌这种方式，但是有些框架要求数据通过属性传递.这类似于您在问题中的显示方式. <my-el data="[{a:1},{a:2}....]"></my-el>.请小心遵守与转义属性值相关的规则.如果使用此方法，则需要在属性上使用JSON.parse，否则可能会失败.在HTML中显示属性中显示大量数据的方法也很丑陋.
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.parse on 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.
3 通过子元素将其传递.将<select>元素与<option>子元素一起考虑.您可以将任何元素类型用作子元素，它们甚至不必是真实元素.在您的connectedCallback函数中，代码仅捕获所有子项并将元素，它们的属性或内容转换为组件所需的数据.
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 connectedCallback function your code just grabs all of the children and convert the elements, their attributes or their content into the data your component needs.
4 使用提取.为您的元素提供一个URL，以获取其自己的数据.想想<img src="imageUrl.png"/>.如果您已经具有组件的数据，那么这似乎是一个糟糕的选择.但是浏览器提供了一个很酷的嵌入数据功能，类似于上面的选项2，但是由浏览器自动处理.
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.
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">
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>
您可以使用XHR进行相同的操作，但是如果您的浏览器支持Web组件，则它可能支持提取.而且，如果您确实需要一种，则有几种不错的提取方法.
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.
使用选项4的最大优点是，您可以从URL 获取数据，并且可以直接嵌入数据.这正是大多数预定义HTML元素(如<img>)的工作方式.
The best advantage to using option 4 is that you can get your data from a URL and you can directly embed your data. And this is exactly how most pre-defined HTML elements, like <img> work.
更新
我确实想到了将JSON数据导入对象的第五种方法.那是通过在组件中使用<template>标记.这仍然需要您调用JSON.parse，但是它可以清理您的代码，因为您不需要太多地转义JSON.
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.parse but it can clean up your code because you don't need to escape the JSON as much.
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>
有三种方法可以从组件中获取数据:
There are three ways to get data out of the component:
1)从属性读取值.这是理想的选择，因为属性可以是任何东西，并且通常采用所需数据的格式.属性可以返回字符串，对象，数字等.
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.
2)读取属性.这要求组件使属性保持最新，并且由于所有属性都是字符串，因此可能不是最佳的.因此，您的用户将需要知道是否需要根据您的值调用JSON.parse.
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.parse on your value or not.
3)事件.这可能是添加到组件中最重要的事情.当组件中的状态更改时，事件应触发.事件应该基于用户的交互而触发，只是为了提醒用户发生了什么事或可用的事.传统上，您会在事件中包含相关数据.这减少了组件用户需要编写的代码量.是的，它们仍然可以读取属性或属性，但是如果您的事件包括所有相关数据，则它们可能无需执行任何其他操作.
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.
这篇关于Web组件，往返于数据之间的传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
