html 级别组件的 lit-element 中的动态属性/属性答案

【问题标题】：Dynamic attribute/property in lit-element at html level componenthtml 级别组件的 lit-element 中的动态属性/属性
【发布时间】：2023-03-09 05:25:01
【问题描述】：

如何将动态属性传递给 html 页面上的 lit-element 组件。例如

我的元素.js

class MyElement extends LitElement {

static get properties() {
    return {    myProp : { type : Object } };
}

render() {
   return html`${this.myProp}`;

}
}

index.html

<script>
var comp = { "name": "Alice", "place" : "wonderland" }
</script>

<my-element myProp=${comp}></my-element>

现在我遇到了这个值没有得到反映的问题，但是如果我传递对象的静态字符串，那么它就会接受它。如果我需要一个根级别的组件，并且动态属性被另一个函数或其他东西改变了怎么办。

【问题讨论】：

标签： javascript lit-element

【解决方案1】：

您将值作为属性传递，这些值总是转换为字符串。

改为使用.property 表示法：

const comp = { name: "Alice", place : "wonderland" }

html`<my-element .myProp=${comp}></my-element>`;

如果您希望能够从纯 HTML 传递值，请使用 JSON.stringify 将对象序列化为字符串，并在 MyElement 中使用 JSON.parse 将其转换回来。

【讨论】：