如何将响应式属性绑定到<input>元素的value值？

你当前的代码实现了单向数据绑定：组件的name属性会同步到<input>的value，但用户修改输入框内容时，name不会自动更新。如果需要双向绑定（输入框变化同步回组件属性，组件属性变化同步到输入框），Lit有两种官方认可的规范实现方式：

方式1：显式绑定input事件实现实时同步 #

这是最灵活的写法，适合需要对输入值做校验、转换的场景：

import {html, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property()
  name: string = 'Somebody';

  private _handleInput(e: InputEvent) {
    const input = e.target as HTMLInputElement;
    this.name = input.value;
  }

  render() {
    return html`
      <input .value=${this.name} @input=${this._handleInput}>
      <p>Hello, ${this.name}!</p>
    `;
  }
}

• 优先用@input而非@change：input事件在用户每一次输入（键盘输入、粘贴等）时触发，实现实时同步；change仅在输入框失去焦点时触发，适合非实时同步场景。

方式2：使用Lit双向绑定语法糖 #

Lit提供了简化的双向绑定语法，用?value=${this.name}替代手动绑定input事件，这是官方推荐的简洁写法：

import {html, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property()
  name: string = 'Somebody';

  render() {
    return html`
      <input ?value=${this.name}>
      <p>Hello, ${this.name}!</p>
    `;
  }
}

这个语法糖会自动为输入框添加input事件监听器，将输入值同步回组件的name属性，同时保持组件属性变化到输入框的单向同步，完全等价于方式1的逻辑。

关键注意点 #

• 必须用@property()装饰name属性，确保属性变化时Lit自动触发组件重渲染，同步到输入框。
• 如果需要自定义同步逻辑（比如输入值格式化、长度限制），显式绑定input事件的方式更可控。

内容的提问来源于stack exchange，提问作者nicoco