在 LIT 的逻辑部分使用绑定数据

Question

我一直在寻找有关变量装箱的信息。问题是我不想在 HTML 渲染中使用这些变量，而是在组件逻辑中使用（我想获取一些数据）。我该如何申报？

  constructor(){
    super();
    this.url = "https://....";
  }


  render() {
    return html`
       <parent-component .url ="${this.url}"></parent-component>
    `;

子组件：

  constructor() {
    super();
    fetch(this.url)
    .then(response => response.json())
    .then(data =>{this.ArrayData = data.results
      this.requestUpdate()
    })
  }

非常感谢

Answer 1

要绑定数据，请为属性声明一个 reactive property，这些属性在更改时可以触发反应式更新周期，re-rendering 组件。

根据您的示例，我不确定您何时要在 child 组件中触发提取。我假设您想要使用从 parent 作为属性绑定传递的 this.url 获取一次数据。

我在代码示例中看到的问题是 this.url 在 child 组件的构造函数中将是 undefined，因为外部元素需要渲染和设置属性 .url 上child。将构造函数中的逻辑移至 firstUpdated 生命周期回调应该可以解决此问题，因为现在将定义 this.url。

我在代码示例中包含的另一个更改是使 this.ArrayData 成为反应式属性，允许删除 this.requestUpdate.

Minimal example of fix in the Lit Playground.

在 LIT 的逻辑部分使用绑定数据

Use Binded data on the logic part on LIT

data-binding

bind

lit-element

lit