I have created simple one component in stencils.js and I used that in react/angular/vue. From my stencil component i have emit an event. This event is captured in angular/react/vue. My problem is I need to use the same component twice in a single html. How I can identify the which event is emitted by which component instance ?
Asked
Active
Viewed 542 times
0
-
can share the code to support your question – Vishnu Shenoy Sep 11 '20 at 19:28
-
You should be able to use `event.target`. – Thomas Sep 15 '20 at 16:11
-
Or try adding metadata when you emit an event. Is bubbles option set to true? – Lukas C Sep 20 '20 at 19:15
1 Answers
0
Using @stencil/react-output-target library and following this guide you will be able to do this:
//button component
import { Component, Prop, h } from '@stencil/core';
@Component({
tag: 'button-component',
styleUrl: 'button.css',
shadow: false,
scoped: true
})
export class MyComponent {
@Prop() label: string;
render() {
return <button type="button">{this.label}</button>;
}
}
// button component instance in React
<ButtonComponent label='Test Button' onClick={() => alert("Hi, I'm a button alert!")}/>
Just found it after hours of trying to pass a function inside of Stencil component...
