Typescript Stenciljs自定义事件未通过@Listen响应

我试图了解自定义事件发射器的流程。我有滚动代码，其中鼠标事件工作，但没有自定义事件。通过开发工具跟踪它，它正在发射，但侦听器没有接收到它

顶级组件如下所示：

import { Component, Prop, Listen, State, Event, EventEmitter } from "@stencil/core"

@Component ({
    tag: "control-comp"
})
export class  SmsComp1 {
    @Prop() compTitle:string;
    @State() stateData: object = {name: "Fred"};

    @Event() stateChanged: EventEmitter;

    @Listen('inBox')
    inBoxHandler(ev) {
        console.log('In box', ev);
        this.stateData["name"] = ev.name;
        console.log('Emitting')
        this.stateChanged.emit(this.stateData);   
    }

    render () {
        let index = [1, 2, 3, 4, 5]
        return (
            <div>
                <h1>{this.compTitle}</h1>
                {index.map( (i) => {
                    return <my-component first={i.toString()} last="Don't call me a framework" width={i*40} height={i*40}></my-component>
                })} 
                <my-component first={this.stateData["name"]} last="'Don't call me a framework' JS"></my-component>
            </div>
        )
    }
} 

import { Component, Prop, Listen, State, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;
  @Prop() width: number = 120;
  @Prop() height: number = 100;
  @State() colour: string = 'red';

  @Event() inBox: EventEmitter;

  @Listen('mouseover') 
  clickHandler() {
    this.colour = 'white';
    this.inBox.emit({action: 'IN_BOX',
                    name: this.first+' '+this.last})
  }

  @Listen('mouseout')
  mouseOutHandler() {
    this.colour = 'red';
  }

  @Listen('stateChanged')
  stateChangedHandler(state) {
    console.log('Received', state);
  }

  render() {
    return (
        <svg width={this.width+10} height={this.height+10}>
          <rect width={this.width} height={this.height} fill='green'></rect>
          <circle cx={this.width/2} cy={this.height/2} r={this.width*0.1} fill={this.colour}></circle>
          <text fill='white' x='10' y='10'>{this.first+' '+this.last}</text>
        </svg>
    );
  }
}

从“@stencil/core”导入{Component，Prop，Listen，State，Event，EventEmitter}
@组成部分({
标签：“控制组件”
})
导出类SmsComp1{
@Prop（）compTitle:string；
@State（）stateData:object={name:“Fred”}；
@Event（）状态已更改：EventEmitter；
@收听（‘收件箱’）
英博处理器（ev）{
控制台日志（“输入框”，ev）；
this.stateData[“name”]=ev.name；
console.log（'发出'）
this.stateChanged.emit（this.stateData）；
}
渲染（）{
设索引=[1,2,3,4,5]
返回(
{this.compTitle}
{index.map（（i）=>{
返回
})} 
)
}
} 

组件如下所示：

import { Component, Prop, Listen, State, Event, EventEmitter } from "@stencil/core"

@Component ({
    tag: "control-comp"
})
export class  SmsComp1 {
    @Prop() compTitle:string;
    @State() stateData: object = {name: "Fred"};

    @Event() stateChanged: EventEmitter;

    @Listen('inBox')
    inBoxHandler(ev) {
        console.log('In box', ev);
        this.stateData["name"] = ev.name;
        console.log('Emitting')
        this.stateChanged.emit(this.stateData);   
    }

    render () {
        let index = [1, 2, 3, 4, 5]
        return (
            <div>
                <h1>{this.compTitle}</h1>
                {index.map( (i) => {
                    return <my-component first={i.toString()} last="Don't call me a framework" width={i*40} height={i*40}></my-component>
                })} 
                <my-component first={this.stateData["name"]} last="'Don't call me a framework' JS"></my-component>
            </div>
        )
    }
} 

import { Component, Prop, Listen, State, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;
  @Prop() width: number = 120;
  @Prop() height: number = 100;
  @State() colour: string = 'red';

  @Event() inBox: EventEmitter;

  @Listen('mouseover') 
  clickHandler() {
    this.colour = 'white';
    this.inBox.emit({action: 'IN_BOX',
                    name: this.first+' '+this.last})
  }

  @Listen('mouseout')
  mouseOutHandler() {
    this.colour = 'red';
  }

  @Listen('stateChanged')
  stateChangedHandler(state) {
    console.log('Received', state);
  }

  render() {
    return (
        <svg width={this.width+10} height={this.height+10}>
          <rect width={this.width} height={this.height} fill='green'></rect>
          <circle cx={this.width/2} cy={this.height/2} r={this.width*0.1} fill={this.colour}></circle>
          <text fill='white' x='10' y='10'>{this.first+' '+this.last}</text>
        </svg>
    );
  }
}

从'@stencil/core'导入{Component，Prop，Listen，State，Event，EventEmitter}；
@组成部分({
标记：“我的组件”，
styleUrl:'my component.css'，
影子：对
})
导出类MyComponent{
@Prop（）第一个：字符串；
@最后一个：字符串；
@Prop（）宽度：number=120；
@支柱（）高度：数字=100；
@State（）颜色：字符串='red'；
@事件（）收件箱：EventEmitter；
@听（'mouseover'）
clickHandler（）{
这个颜色=白色；
this.inBox.emit（{action:'IN_BOX'，
名称：this.first+''+this.last}）
}
@听（‘老鼠出声’）
老鼠唐德勒（）{
这个颜色=红色；
}
@侦听（'stateChanged'）
stateChangedHandler（州）{
console.log（'Received'，state）；
}
render（）{
返回(
{this.first+''+this.last}
);
}
}

最后，index.html在这里：

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Stencil Component Starter</title>
  <script src="/build/mycomponent.js"></script>

</head>
<body>

 <control-comp compTitle="Stencil Example"></control-comp>
  <my-component first="My Dead" last='Component' width=100 height=120></my-component>

</body>
</html>

模板元件起动器

---

您能说明为什么我的组件没有注意到stateChanged事件吗？

模具事件，就像其他

CustomEvent

s一样，只是在组件树上冒泡，而不是向下冒泡

由于

my component

是

control comp

的子组件，因此

control comp

无法查看父组件的

stateChanged

事件

您需要找到另一种方法让父组件与子组件通信。执行此操作的“标准”方法是在子对象上设置一个

@Prop

和一个

@Watch

，并在父对象的

render（）

函数中更新该Prop

---

或者，您可以使用更健壮的方法，如或。

模具事件，如其他

CustomEvent

s只在组件树上冒泡，而不是向下冒泡

由于

my component

是

control comp

的子组件，因此

control comp

无法查看父组件的

stateChanged

事件

您需要找到另一种方法让父组件与子组件通信。执行此操作的“标准”方法是在子对象上设置一个

@Prop

和一个

@Watch

，并在父对象的

render（）

函数中更新该Prop

---

或者，您可以使用更稳健的方法，如或。

可能已经太晚了，但您可以使用

@Listen

export interface ListenOptions {
  target?: 'parent' | 'body' | 'document' | 'window';
  capture?: boolean;
  passive?: boolean;
}

（来源：）

如果将侦听器附加到

文档

，您将获得预期的事件

@Listen('inBox', { target: 'document' })
...

---

可能已经很晚了，但您可以使用

@Listen

export interface ListenOptions {
  target?: 'parent' | 'body' | 'document' | 'window';
  capture?: boolean;
  passive?: boolean;
}

（来源：）

如果将侦听器附加到

文档

，您将获得预期的事件

@Listen('inBox', { target: 'document' })
...

---

值得一提的是，这篇文章特别建议将文档/窗口作为事件监听的一种方法：大多数时候，您最好选择“文档”，特别是对于您自己的自定义事件：值得注意的是，本文特别建议将文档/窗口作为事件侦听的一种方法：您可能最好在大多数情况下选择“文档”，尤其是对于您自己的自定义事件：