Web Components 复杂数据的高效传递与处理
本文探讨在 Web Components 中安全传递复杂数据（例如包含多个对象的数组）的最佳实践。 假设我们有一个
let data = [{id:1,name:'1'},{id:2,name:'2'},{id:1,name:'3'},...];
直接将 JavaScript 对象作为属性传递并非理想方案，因为 Web Components 属性只能接收字符串。 因此，我们需要将数据序列化为字符串再传递。 JSON 字符串化是常用的方法。
在父组件中，我们将 data 对象转换为 JSON 字符串，然后赋值给 data 属性：
杰易OA办公自动化系统6.0
下载
基于Intranet/Internet 的Web下的办公自动化系统，采用了当今最先进的PHP技术，是综合大量用户的需求,经过充分的用户论证的基础上开发出来的，独特的即时信息、短信、电子邮件系统、完善的工作流、数据库安全备份等功能使得信息在企业内部传递效率极大提高，信息传递过程中耗费降到最低。办公人员得以从繁杂的日常办公事务处理中解放出来，参与更多的富于思考性和创造性的工作。系统力求突出体系结构简明
let data = [{id:1,name:'1'},{id:2,name:'2'},{id:1,name:'3'}];
let jsonString = JSON.stringify(data);
document.querySelector('order-tree').data = jsonString;
在 this.data 获取 JSON 字符串，并使用 JSON.parse() 方法将其解析回 JavaScript 对象：
class OrderTree extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
try {
let data = JSON.parse(this.data);
// 现在 data 是一个 JavaScript 对象，可以正常使用了
console.log(data);
// ... 使用 data ...
} catch (error) {
console.error('JSON 解析失败:', error);
// 处理 JSON 解析错误，例如显示错误信息或使用默认数据
}
}
get data() {
return this.getAttribute('data');
}
set data(value) {
this.setAttribute('data', value);
}
}
customElements.define('order-tree', OrderTree);
此方法确保复杂数据安全有效地传递给 Web Components 并进行解析。 记住在组件内部添加错误处理机制，以应对 JSON.parse() 失败的情况，例如显示错误信息或使用默认数据。
