从用户控件调用父页面中的方法

class ParentComponent extends React.Component {
  handleMethod() {
    console.log('Parent method called');
  }

  render() {
    return<ChildComponent onMethodCall={this.handleMethod} />;
  }
}

class ChildComponent extends React.Component {
  render() {
    return<button onClick={this.props.onMethodCall}>Call Parent Method</button>;
  }
}

<!-- ParentComponent.vue --><template>
 <ChildComponent @method-call="handleMethod" />
</template><script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleMethod() {
      console.log('Parent method called');
    },
  },
};
</script>

<!-- ChildComponent.vue --><template>
 <button @click="$emit('method-call')">Call Parent Method</button>
</template><script>
export default {
  // ...
};
</script>

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (methodCall)="handleMethod()"></app-child>
  `,
})
export class ParentComponent {
  handleMethod() {
    console.log('Parent method called');
  }
}

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

@Component({
  selector: 'app-child',
  template: `
   <button (click)="emitMethodCall()">Call Parent Method</button>
  `,
})
export class ChildComponent {
  @Output() methodCall = new EventEmitter<void>();

  emitMethodCall() {
    this.methodCall.emit();
  }
}