はじめに

ある子コンポーネントで定義したメソッドを別の子コンポーネントで使いたかったので、親コンポーネントを経由して受け渡ししました。

環境

Vue.js 3.2
Composition API

前提知識

子から親へメソッドを渡すのに defineExpose を使用します。

子で発生したイベントを検知して、親のメソッドを呼び出すには emit を使用します。

実装

Child1コンポーネントに定義されたメソッドを、Child2コンポーネントのボタンが押されたときに呼び出しています。

親コンポーネント

Parent.vue

<script setup>
import { ref } from "vue";
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";

// Child1コンポーネントの情報を受け取る
const child1Ref = ref();

const callChild1Method = () => {
  // Child1コンポーネントのメソッドを呼び出す
  child1Ref.value.child1Method();
};
</script>

<template>
  <div>
    <Child1 ref="child1Ref" />
    <Child2 @doEmit="callChild1Method()" />
  </div>
</template>

子（Child1）コンポーネント

Child1.vue

<script setup>
// Parentに渡しChild2から呼び出されるメソッドを定義
const child1Method = () => {
  console.log("child1コンポーネントのメソッドが呼ばれた！");
};

// Parentからの呼び出しを可能にする
defineExpose({ child1Method });
</script>

子（Child2）コンポーネント

Child2.vue

<script setup>
// emitを定義しイベントの発火を親が検知できるようにする
const emit = defineEmits(["doEmit"]);
</script>

<template>
  <div>
    <button @click="emit('doEmit')">Child1のメソッドを呼ぶ</button>
  </div>
</template>

おわりに

Vue.jsにまだ慣れていないので、他にもっと良い方法がある気がします、、

もしよければ、コメント欄でご教示いただけますと幸いです。

参考