0

我在我的项目中使用模板框架来创建组件。项目结构是树基意味着子契约也有子组件。我在很多地方都使用过自定义事件。

我担心的是，当我使用参数监听事件时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

提前感谢您的帮助！！

4

1 回答 1

0

target: 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值。

于 2021-04-30T17:08:18.327 回答