当同一个组件在单页上使用两次时，事件侦听会发生冲突

问题描述

我在我的项目中使用模板框架来创建组件。项目结构是以树为基础的，这意味着子压缩包也有子组件。我在很多地方都使用过自定义事件。

我担心的是，当我使用参数 target:body 侦听事件时，代码会执行两次，因为我在单个页面上两次使用了相同的组件。我创建了示例组件来显示问题/关注点。

主要组件代码片段

import { Event,EventEmitter,Component,Prop,h } from '@stencil/core';
@Component({
   tag: 'my-component'
})
export class MyComponent {
  @Prop() first: string;
  @Prop() middle: string;
  @Prop() last: string;
  @Event() nameClick: EventEmitter;

handleClickEvent(e): void {
 this.nameClick.emit({ name: `${this.first} ${this.middle} ${this.last}` });
}

render() {
   return (
     <div>
       <div onClick={(e) => this.handleClickEvent(e)}><u>Click here to show you name!!</u></div>
       <p><div>Your full name</div><sub-component></sub-component></p>
     </div>
   )
 }
}

子组件片段

import { Component,h,Listen,State } from '@stencil/core';
@Component({
  tag: 'sub-component'
})
export class SubComponent {

@State() fullName: string;

@Listen('nameClick',{ target: 'body' })
onNameClick(event: CustomEvent) {
    this.fullName = event.detail.name;
}
render() {
    return <input type="text" value={this.fullName}></input>
 }
}

使用组件的 HTML 页面

<div id="content" class="tabcontent">
 <div style="width:50%;float:left">
  <p>Component 1</p>
  <my-component first="Stencil" middle="web" last="component"></my-component>
 </div>
 <div style="width:50%;float:right">
  <p>Component 2</p>
  <my-component first="Stencil" middle="web" last="component"></my-component>
 </div>
</div>

似乎这段代码是监听事件两次 @Listen('nameClick',{ target: 'body' }) 的罪魁祸首。

Gif for demo

预先感谢您的帮助！！

解决方法

在这种情况下使用 target: body 很像监听来自 body 的按钮的点击，每次点击都会触发 - 这不是解决问题的正确方法。

您的父级 my-component 已经知道哪个 sub-component 是哪个，因为它是模板的一部分，因此如果您将 fullName 设为 @Prop，它可以直接更新。

例如（部分代码）：

export class SubComponent {

  @Prop() fullName: string;

  render() {
    return <input type="text" value={this.fullName}></input>
  }
}

export class MyComponent {
  ...
  private _childComponent: HTMLSubComponentElement;

  handleClickEvent(e): void {
    this._childComponent.fullName = `${this.first} ${this.middle} ${this.last}`;
  }

  render() {
    return (
      <div>
        <div onClick={(e) => this.handleClickEvent(e)}><u>Click here to show you name!!</u></div>
        <p>
          <div>Your full name</div>
          <sub-component ref={el => this._childComponent = el}></sub-component>
        </p>
      </div>
    );
  }
}

如果您不想使用 @Prop - 您也可以定义一个 @Method 来设置 fullName 值。

javascript stencil-component stenciljs