如何从模板组件中收听react/角/vue中的事件

Question

我已经在stencils.js中创建了一个简单的组件，并在react/角/vue中使用了这个组件。在我的模具组件中，我发出了一个事件。此事件在角/react/vue中捕获。我的问题是，我需要在一个html中使用同一组件两次。如何识别哪个事件是由哪个组件实例发出的？

Answer 1

使用@stencil/react-output-target库并遵循本指南，您将能够这样做：

//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!")}/>

在几个小时试图在模具组件内部传递一个函数之后才发现的.