>我正在尝试了解自定义事件发射器的流程。我有滚动代码，鼠标事件在其中工作，但没有自定义事件。 通过开发工具跟踪它，它正在发出，但不会被侦听器拾取。
顶级组件在这里：
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>
);
}
}
最后索引.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>
你能建议为什么my-component没有注意到stateChanged事件吗？
也许已经晚了，但您可以使用选项进行@Listen
export interface ListenOptions {
target?: 'parent' | 'body' | 'document' | 'window';
capture?: boolean;
passive?: boolean;
}
(来源：https://stenciljs.com/docs/events#listen-s-options(
如果将侦听器附加到document则将获得预期的事件
@Listen('inBox', { target: 'document' })
...
与其他CustomEvent一样，模板事件只在组件树上冒泡，而不是向下冒泡。
由于my-component是control-comp的孩子，父stateChanged事件无法被control-comp看到。
您需要找到另一种方法，让父组件与子组件通信。执行此操作的"标准"方法是在子项上设置一个@Prop，也许是一个@Watch，并在父项的render()函数中更新道具。
或者，您可以使用更可靠的方法，如 stencil-redux 或 stencil-state-tunnel。