はじめに
ある子コンポーネントで定義したメソッドを別の子コンポーネントで使いたかったので、親コンポーネントを経由して受け渡ししました。
環境
- 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にまだ慣れていないので、他にもっと良い方法がある気がします、、
もしよければ、コメント欄でご教示いただけますと幸いです。
参考