Web Components 復雜數據的高效傳遞與處理
本文探討在 Web Components 中安全傳遞復雜數據（例如包含多個對象的數組）的最佳實踐。 假設我們有一個
let data = [{id:1,name:'1'},{id:2,name:'2'},{id:1,name:'3'},...];
直接將 JavaScript 對象作為屬性傳遞并非理想方案，因為 Web Components 屬性只能接收字符串。 因此，我們需要將數據序列化為字符串再傳遞。 json 字符串化是常用的方法。
在父組件中，我們將 data 對象轉換為 JSON 字符串，然后賦值給
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;
在
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() 失敗的情況，例如顯示錯誤信息或使用默認數據。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
