VUE 中父级组件使用JSON.stringify 序列化子组件传递循环引用错误

背景

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();
};