背景

VUE 中父級組件使用JSON.stringify 序列化子組件傳遞的數據會報錯

runtime-core.esm-bundler.js:268 Uncaught TypeError: Converting circular structure to JSON
–> starting at object with constructor ‘Object’
— property ‘config’ closes the circle

原因

子組件直接把自己的對象傳遞給了父組件。
再子組件進行序列化， 父組件反序列即可
修改前子組件

const updateAll = () => {emits('change', configData.value);// emits('update:value', configData.value);
}; 

修改后子組件

const updateAll = () => {const config = JSON.stringify(configData.value);emits('change', config);// emits('update:value', configData.value);
};

修改前父組件

const updateConfig = (e: any) => {configData.value[curTabKey.value].config = e;updateAll();
};

修改后父組件

const updateConfig = (e: any) => {configData.value[curTabKey.value].config = JSON.parse(e);updateAll();
};