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

问题描述

尝试模拟鼠标单击一个按钮，然后单击另一个按钮。目标是在整个页面中重用单个自定义按钮的行为。为什么dispatchEvent不起作用？

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

parentApp.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,api } from 'lwc';

export default class App extends LightningElement {
    @api label;

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

解决方法

感谢Nathan Shulman for helping with this。

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

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

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

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