如何将嵌套数据结构作为 LitElement 中的属性传递？

在父组件中我有类似的内容：

render() => {
    const data = {a:1,b:[1,2,3]}; // of course this is a simplified version of the code
    return html`<child-component data=${data}></child-component>`
}

这基本上相当于：

render() => {
    const data = {a:1,b:[1,2,3]}; // of course this is a simplified version of the code
    return html`<child-component data="[object Object]"></child-component>`
}

基本上没什么用...

有没有一种简单的方法可以将复杂的对象层次结构传递到 litElement 组件中？

据我所知，我的选择是：

选项1。使用属性：我是一个 litElement 菜鸟，所以我不确定这是否有效，并且我不确定如何使其工作而无需进行额外的函数调用。如果我能在里面做所有必要的工作就好了html.

研究正在进行中。

选项 2。使用杰森。

将父组件中的对象字符串化

render() => {
    const data = {a:1,b:[1,2,3]}; // of course this is a simplified version of the code
    return html`<child-component data=${JSON.stringify(data)}></child-component>`
}

然后解析子组件中的json。

不过，这对我来说似乎有点不优雅。

但它有效。

在这种情况下，您可能想要的是将对象作为属性而不是属性 https://lit.dev/docs/templates/expressions/#property-expressions。对于对象、数组、函数等复杂数据，这是首选方法。

您可以使用以下语法来完成此操作：

render() => {
  const data = {a:1,b:[1,2,3]};
  // note the period (.), that's the token used to identify that you're passing data as a property
  return html`<child-component .data=${data}></child-component>`
}

一般来说，你应该给Lit 的模板指南一读 https://lit.dev/docs/templates/overview/因为其中涵盖了一些最常见的用例。