将鼠标事件传递给父控件

class ParentComponent extends React.Component {
  handleClick(event) {
    console.log('Child component clicked:', event);
  }

  render() {
    return<ChildComponent onClick={this.handleClick} />;
  }
}

class ChildComponent extends React.Component {
  handleClick(event) {
    this.props.onClick(event);
  }

  render() {
    return<button onClick={this.handleClick}>Click me</button>;
  }
}

<!-- ParentComponent.vue --><template>
 <ChildComponent @clicked="handleClick" />
</template><script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleClick(event) {
      console.log('Child component clicked:', event);
    },
  },
};
</script>

<!-- ChildComponent.vue --><template>
 <button @click="handleClick">Click me</button>
</template><script>
export default {
  methods: {
    handleClick(event) {
      this.$emit('clicked', event);
    },
  },
};
</script>

<!-- parent.component.html -->
<app-child (clicked)="handleClick($event)"></app-child>

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  handleClick(event) {
    console.log('Child component clicked:', event);
  }
}

<!-- child.component.html --><button (click)="handleClick($event)">Click me</button>

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Output() clicked = new EventEmitter<Event>();

  handleClick(event) {
    this.clicked.emit(event);
  }
}