html级组件上的元素中的动态属性/属性

问题描述

如何将动态属性传递给html页面上的亮元素组件。例如

my-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>

现在，我遇到的问题是该值未得到反映，但是如果我传递对象的静态字符串，则它将接受它。如果我需要在根级使用动态属性被另一个函数或其他东西更改的组件，该怎么办。

解决方法

您将值作为属性传递，并且这些值始终转换为字符串。

改为使用 .property 表示法：

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

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

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