LitElement组件传值问题：EventListener触发后render方法未更新求助

你的代码核心问题是事件处理函数的this指向错误，导致修改的不是组件实例的content属性，因此Lit无法触发render更新。另外，全局监听window事件并非组件通信的最佳实践，下面分两种方式解决：

一、快速修复：修正this指向 #

方案1：使用箭头函数绑定this #

将_onChangeContent定义为箭头函数，自动捕获组件实例的this：

export class Display extends LitElement {
    static properties = {
        content: {type: String}
    };

    constructor() {
        super();
        this.content = '0.00';
    }

    connectedCallback() {
        super.connectedCallback();
        window.addEventListener('inputreceiver', this._onChangeContent);
    }
    
    disconnectedCallback() {
        window.removeEventListener('inputreceiver', this._onChangeContent);
        super.disconnectedCallback();
    }

    render() {
        return html`
            <p class="display">value: ${this.content}</p>
        `;
    }

    // 箭头函数自动绑定组件实例的this
    _onChangeContent = (event) => {
        this.content = event.detail.message;
    }
}
customElements.define('test-input', Display);

方案2：在构造函数中绑定this #

export class Display extends LitElement {
    static properties = {
        content: {type: String}
    };

    constructor() {
        super();
        this.content = '0.00';
        // 手动绑定this到组件实例
        this._onChangeContent = this._onChangeContent.bind(this);
    }

    connectedCallback() {
        super.connectedCallback();
        window.addEventListener('inputreceiver', this._onChangeContent);
    }
    
    disconnectedCallback() {
        window.removeEventListener('inputreceiver', this._onChangeContent);
        super.disconnectedCallback();
    }

    render() {
        return html`
            <p class="display">value: ${this.content}</p>
        `;
    }

    _onChangeContent(event){
        this.content = event.detail.message;
    }
}
customElements.define('test-input', Display);

二、最佳实践：通过父组件中介通信 #

全局监听window事件容易引发冲突，推荐使用共同父组件作为事件中介，这是Lit组件间通信的标准模式：

1. 创建容器组件 #

export class AppContainer extends LitElement {
    static properties = {
        displayContent: {type: String}
    };

    constructor() {
        super();
        this.displayContent = '0.00';
    }

    render() {
        // 将父组件的属性传递给Display组件，监听按钮的自定义事件
        return html`
            <test-input .content=${this.displayContent}></test-input>
            <test-button @inputreceiver=${this._handleEvent}></test-button>
        `;
    }

    _handleEvent(event) {
        // 更新父组件属性，自动同步到子组件
        this.displayContent = event.detail.message;
    }
}
customElements.define('app-container', AppContainer);

2. 修改HTML结构 #

<app-container></app-container>

3. 优化TestButton组件（可选） #

将非标准的event.originalTarget替换为标准的event.target：

_onClickHandler(event){
    const target = event.target;
    const options = {
        detail: { message: target.innerText },
        bubbles: true,
        composed: true
    }
    let buttonEvent = new CustomEvent('inputreceiver', options);
    this.dispatchEvent(buttonEvent);
}

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