Vue.js refで関数を実行した場合の子からのemitを受け取る方法

Vue.js refで関数を実行した場合の子からのemitを受け取る方法

テンプレートでv-onでemit結果をハンドルするのではなく、JS側で結果を受け取りたい。
マニュアルによると、
プログラム的なイベントリスナーで対処できるとのこと。

特定のイベントを監視する$on(eventName, eventHandler)

<template>
  <div>
    <div v-if="isActive">
       <ChildModal ref="childModal" />
    </div>
  </div>
</template>
export default {
  data() {
    return {
      isActive: false,
      }
  },
  methods: {
    // モーダルを開く
    onOpenModal() {
      this.isActive = true;
      ・・・・
      this.$emit('onOpenModal', result);
    }
  }
}    

<template>
  <div>
    <ChildComponent ref="childModal" />
  </div>
</template>

<script>
import ChildComponent from '@/path/to/ChildComponent.vue'; 
export default {
  components: {
    ChildComponent,
  },
  mounted() {
    // refを使用して子コンポーネントを取得
    const childModalComponent = this.$refs.childModal;

    // 子コンポーネントで発生するイベントを直接リッスン
    childModalComponent.$on('onOpenModal', this.handleOpenchildModal);
  },
  methods: {
    handleOpenchildModal(result) {
      // openchildModalイベントが発生したときの処理
      console.log('Received event from child event:', result);
      // 他の処理を追加できます
    },
    // 他のメソッドやデータなど
  },
};
</script>