Web Components如何高效傳遞復雜數據？

Web Components 復雜數據傳遞的最佳實踐

本文介紹如何在 Web Components 中安全高效地傳遞復雜數據，例如包含多個對象的數組。 我們以 組件為例，它需要接收一個包含多個訂單對象的數組。

直接將 JavaScript 對象作為屬性值傳遞給 Web Components 并非理想方案，因為屬性值會被轉換為字符串，可能導致數據丟失或類型錯誤。 對于復雜數據結構，這種問題尤為突出。

推薦的解決方案是：將復雜數據轉換為 json 字符串，在組件屬性中傳遞該字符串，然后在組件內部將其解析回 JavaScript 對象。

父組件操作：

首先，在父組件中將數據轉換為 JSON 字符串：

let data = [{id:1,name:'1'},{id:2,name:'2'},{id:1,name:'3'},...]; let dataString = JSON.stringify(data); // ... 將 dataString 賦值給 order-tree 組件的 data 屬性 ...

子組件（）操作：

然后，在 組件內部，使用 JSON.parse() 方法解析 JSON 字符串：

class OrderTree extends HTMLElement {   connectedCallback() {     const dataString = this.getAttribute('data');     const data = JSON.parse(dataString);     // ... 使用解析后的 data 對象 ...   } } customElements.define('order-tree', OrderTree);

通過這種方法，可以確保數據在傳遞過程中保持完整性和類型正確性，避免了直接傳遞復雜對象可能帶來的數據損壞或類型轉換錯誤。 這種 JSON 字符串轉換方法是傳遞復雜數據到 Web Components 的一種可靠且高效的方式。