0

lit 在以下 URL 中介绍了“更改检测”的示例。 https://lit.dev/playground/#sample=examples/properties-has-changed

为什么有一个“。” 在 my-element.ts 的第 16 行中指定“日期显示”选项时，在“日期”的开头？

import { LitElement, html} from "lit";
import {customElement, property} from 'lit/decorators.js';
import {localDateFromUTC} from './date-utils.js';
import './date-display.js';

@customElement('my-element')
class MyElement extends LitElement {

  @property() date?: Date;

  render() {
    return html`
      <p>Choose a date:
      <input type="date" @change=${this._dateChanged}></p>
      <p><button @click=${this._chooseToday}>Choose Today</button></p>
      <p>Date chosen: <date-display .date=${this.date}></date-display></p>
    `;
  }

  _dateChanged(e: Event) {
    const utcDate = (e.target as HTMLInputElement).valueAsDate;
    if (utcDate) {
      this.date = localDateFromUTC(utcDate);
    }
  }

  _chooseToday() {
    this.date = new Date();
  }
}
4

1 回答 1

0

Lit 使用前缀来指示组件模板中表达式的类型。前缀.表示属性表达式；如果没有前缀，它将是一个属性表达式。使用属性表达式使得将任何 JS 对象传递给子元素（在本例中为Date对象）变得非常容易和方便。

使用 HTML 属性时，您需要注意它们始终是字符串。JS 数据必须在父元素上转换为字符串，然后可能在子元素上转换回对应的 JS 类型。属性表达式不会执行此类转换，因为数据保留在“JS 土地”中。

那么，为什么不总是使用属性表达式呢？我马上想到了两个例子：

  1. 要使属性表达式起作用，您需要知道子元素的实现细节，即它具有相应的 JS 属性。（如果您在单个项目中处理自己的基于 Lit 的元素，这不是问题。）

  2. 如果您想应用基于属性的选择器（例如用于样式my-button[disabled] { /* CSS ... /* }或使用querySelector）。

于 2021-06-23T08:13:08.477 回答