salesforce-lightning - LWC 创建和调度事件不起作用

Question

试图通过单击另一个按钮来模拟鼠标单击一个按钮。目标是在整个页面中重用单个自定义按钮的行为。为什么dispatchEvent不工作？

如何<c-custom-button>模拟点击？

父应用程序.html

<template>
    <div>
        <c-custom-button
            label="New">
        </c-custom-button>
    </div>
    <div>
        <lightning-button
            label="Call New"
            onclick={simulateClick}>
        </lightning-button>
    </div>
</template>

parentApp.js

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {

    cButtonElement;

    simulateClick() {
        this.cButtonElement = this.template.querySelector('c-custom-button');
        let clickEvent = new CustomEvent('click');
        this.cButtonElement.dispatchEvent(clickEvent);
    }

}

customButton.html

<template>
    <lightning-button
        label={label}
        icon-name="utility:new"
        onclick={handleClick}>
    </lightning-button>
</template>

customButton.js

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    @api label;

    handleClick() {
        this.label = 'CLICKED!'
    }
}

Answer 1

感谢Nathan Shulman 提供的帮助。

在 parentApp.js 中添加对子方法的调用

    simulateClick() {
        this.cButtonElement = this.template.querySelector('c-custom-button');
        this.cButtonElement.handleClick();
    }

将 @api 装饰器添加到 customButton.js 中的方法

    @api handleClick() {         
        this.label = 'CLICKED!'
    }