【vue3】【composition api】子要素でdefineExposeで定義した関数が親要素で正常に参照できない

Question

実現したいこと

親要素にてvfor内の:refを使用して子要素のdefineExposeで定義した関数にアクセスしたい

前提

"vue": "^3.2.13",

下記のようなサイトを作成

1. hello world コンポーネントを作成してそれをv-forで表示
2. さらにそのコンポーネントを:refにて取得した
3. fireを押下するとdefineExposeで定義した子要素のexposeFunctionを発火させたい

発生している問題・エラーメッセージ

Fire 押下時:refで取得したコンポーネントからexposeFunction

Uncaught TypeError: componentRef.exposeFunction is not a function
    at eval (HomeView.vue?71c7:27:1)
    at Proxy.forEach (<anonymous>)
    at onFire (HomeView.vue?71c7:26:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:173:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:182:1)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?2725:345:1)

該当のソースコード

子要素 HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineExpose } from "vue";

interface Props {
  msg: string;
}
const props = defineProps<Props>();

function exposeFunction() {
  console.log(props.msg);
}
defineExpose({
  exposeFunction,
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>

親要素 HomeView.vue

<template>
  <div
    class="home"
    v-for="item of items"
    :key="item.id"
    :ref="setComponentRefs"
  >
    <HelloWorld :msg="item.value" ref="componentRef" />
  </div>
  <button @click="onFire">Fire</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

const componentRefs = ref<Array<InstanceType<typeof HelloWorld>>>([]);

const items = ref([
  { id: "001", value: "vue1" },
  { id: "002", value: "vue2" },
  { id: "003", value: "vue3" },
]);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function setComponentRefs(el: any) {
  if (el) {
    componentRefs.value.push(el as InstanceType<typeof HelloWorld>);
  }
}
function onFire() {
  componentRefs.value.forEach((componentRef) => {
    componentRef.exposeFunction();
  });
}
</script>

ちなみにvscodeのホバーした際のヒントでは正常に出てくる（型定義が影響しているかも？）

試したこと

v-forを使用せずに単体コンポーネントのリファレンスのexploreFunctionは正常に発火する

補足情報（FW/ツールのバージョンなど）

該当ソースコードをアップしましたので、再現などにお役立てください
https://github.com/mendakon/defineEmitnotWorked

Answer 1

テンプレート参照をv-forの中で使用した場合、自動で要素の配列になります。
https://ja.vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for

そのため、pushで配列を作成する必要はなく、そのままコンポーネントにref属性をつけてあげれば、配列を取得できます。

<template>
  <div
    class="home"
    v-for="item of items"
    :key="item.id"
  >
    <HelloWorld :msg="item.value" ref="componentRefs" />
  </div>
  <button @click="onFire">Fire</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

const componentRefs = ref<Array<InstanceType<typeof HelloWorld>>>([]);

const items = ref([
  { id: "001", value: "vue1" },
  { id: "002", value: "vue2" },
  { id: "003", value: "vue3" },
]);

function onFire() {
  componentRefs.value.forEach((componentRef) => {
    componentRef.exposeFunction();
  });
}
</script>

Comments

[kuchibashi]

正常に動作しました。vueの仕様まで教えていただきありがとうございます。

Answer 2

以下のような実装は要件を満たさないでしょうか？

<template>
  <div class="home">
    <HelloWorld
      v-for="item of items"
      :key="item.id"
      :msg="item.value"
      :ref="(el) => setComponentRefs(el)"
    />
  </div>
  <button @click="onFire">Fire</button>
</template>

Comments

[kuchibashi]

動作しました。v-forについていろいろと勘違いしていたみたいです。ありがとうございます。