来自槽的数据绑定？

Question

我一直在使用 Lit，最近我遇到了一个奇怪的问题，当属性值（在本例中：updated

）为更改为通过插槽加载的组件。

这就是我一直在做的例子：

parentComponent.ts

hasUpdated

grandChildComponent.ts

constructor() {
  super();
  this.hasUpdated = false;
}

triggerUpdate() {
  this.hasUpdated = true;
}

render() {
  return html`
    <child-component>
      <div slot="grand-child-slot">
        <grand-child-component
          .hasUpdated="${this.hasUpdated}"
        >
        </grand-child-component>
      </div>
    </child-component>
  `
}

在上面的示例中，当

updated(changedProperties) {
   super.updated(changedProperties);
   if (changedProperties.has('hasUpdated') && this.hasUpdated) {
     console.log(`Property "hasUpdated" has been updated to: ${this.hasUpdated}`);
   }
 }

 更新为新值时，

console.log

永远不会执行。

如果我将

hasUpdated

重新加载到插槽中，那么它就可以工作。我希望更改能够实时发生，而无需重新加载模板。

有人知道为什么在插槽中使用时会发生这种情况吗？

如果您在 lit 中声明类属性，则不会触发更新。但是，您可以通过调用

requestUpdate

Answer 1

显式触发更新

grand-child-component

或

或者，您可以声明 state 响应式属性，该属性将在更改时触发更新

triggerUpdate() {
  this.hasUpdated = true;
  this.requestUpdate()
}