【Vue3 / Composition API】親コンポーネントから子コンポーネントのメソッドを実行・データを参照

課題

• 親コンポーネントから子コンポーネントのメソッドを実行したい
• 親コンポーネントから子コンポーネントのデータを参照したい

解決策

1. 子コンポーネント側で、defineExposeを使用して外部から参照可能なプロパティの定義をする
2. 親コンポーネント側で、子コンポーネントにアクセスができるrefを使用する
3. 親コンポーネント側で、(2) で定義したrefを通して、(1)で定義した参照可能なプロパティにアクセス、実行する

子コンポーネント

<template>
  <button @click="countUp()">{{ count }}</button>
</template>

<script setup>
import { ref } from "vue";

const count = ref(0);

const countUp = () => {
  count.value++
};

// "defineExpose"を使用して、外部から参照できるプロパティを定義する
defineExpose({
  countUp,
  count
});
</script>

親コンポーネント

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="onChildClick">子コンポーネントのカウント + 1</button>
    <p>子コンポーネントのカウント: {{ childCount }}</p>
  </div>
</template>

<script setup>
import ChildComponent from "./ChildComponent.vue";
import { ref, onMounted } from "vue";

// 子コンポーネントにアクセスする為の"ref"を定義
const child = ref(null);

const onChildClick = () => {
  // "ref"を通して子コンポーネントのメソッドにアクセス、実行
  child.value.countUp();
};

const childCount = ref(0);

onMounted(() => {
  // "ref"を通して子コンポーネントのデータにアクセス
  childCount.value = child.value.count;
});
</script>