无法将 JSON 字符串化数据传递给 IE Edge 浏览器中的 Lit Element 子组件

Question

我正在尝试将我的 JSON 数据（JSON 字符串化数据）传递给 Litelement Compoent 中的子组件。它正在 Chrome 工作。但在 IE Edge 浏览器中变得未定义

  <parent-comp>
    <child-comp myJsonData=`${JSON.stringify({ code: '123',name: 'xyz'})}`>
    </child-comp>
  </parent-comp>

将此 myJsonData 用于子组件的更新生命周期。但是在 IE Edge 中获取的值为 undefined。

Answer 1

LitElement 可以将值作为属性或属性传递。当您希望在 HTML 中将值作为字符串传递时使用属性，但您需要为序列化和解析结果支付开销。在传递对象时使用属性。

由于 JSON.stringify 的问题，这可能无法正常工作，但即使它确实有效，您的输出 HTML 也将是：

  <parent-comp>
    <child-comp myJsonData="{ code: '123', name: 'xyz'}">
    </child-comp>
  </parent-comp>

现在 child-comp 负责将字符串 "{ code: '123', name: 'xyz'}" 解析回对象。

改为使用属性前缀：

const data = { code: '123', name: 'xyz'};
retrun html`
  <parent-comp>
    <child-comp .myJsonData=${data}>
    </child-comp>
  </parent-comp>`

现在没有 stringify/parse 工作 - Lit 直接设置属性（类似于 this.shadowRoot.querySelector('child-comp').myJsonData = data）。

如果您使用的是 TypeScript 装饰器，则可以在属性上使用 @property({attribute: false})，并在缺少 . 前缀时收到警告或错误。

Not able to pass JSON stringify data to Lit Element child component in IE Edge browser