【Vue3+Ts】セットアップ構文シュガーを使用して親コンポーネントが子コンポーネントのインスタンスを取得できない理由

エラーコード：

サブアセンブリ:

<template>
    <div></div>
</template>

<script setup lang="ts">
// 引入defineExpose 将数据暴露
import {defineExpose} from 'vue'
// 定义一个变量
let test = {name: 'xiaoman'}
// 暴露给父组件
defineExpose({test})
</script>

親コンポーネントは以下を受け取ります。

<template>
  <Child ref="child" ></Child>
</template>

<script setup lang="ts">
import Child from './Child'
import { ref, onMounted } from 'vue'

const childComp = ref<InstanceType<typeof Child>>()

onMounted(() => {
  console.log(childComp.value) // undefined
  console.log(childComp.value.test, '???') // 报错：找不到test变量
})
</script>

<style scoped>

</style>

onMounted でサブコンポーネントインスタンスと公開オブジェクトを取得できません

後で問題が見つかりました。

サブコンポーネントインスタンスを受け取る変数は、サブコンポーネントタグ内の ref の割り当てと一致している必要があります。！！

親コンポーネントのコードを修正しました:

<template>
  <Child ref="child" :title="name" :arr="[1,2,3]" @on-click="getName" ></Child>
</template>

<script setup lang="ts">
import Child from './Child'
import { ref, onMounted } from 'vue'

// child这个变量必须和子组件里面的ref定义的一模一样
const child = ref<InstanceType<typeof Child>>()

onMounted(() => {
  console.log(child.value)
  console.log(child.value.test, '???')
})
</script>

<style scoped>

</style>

値は出力することもできます。

Vue3 セットアップ構文シュガーで ref を使用して親コンポーネントが子コンポーネントを取得できない理由を簡単にまとめてみましょう。

1. サブコンポーネントのデータはdefineExposeを使用して公開されません

2. サブコンポーネントタグへの ref の割り当ては、変数を割り当てる際の親コンポーネントの名前と一致しません。

3. .value を取得しても役に立たない

4. onMounted で取得されておらず、コンポーネントがまだマウントされていません。

【Vue3+Ts】セットアップ構文シュガーを使用して親コンポーネントが子コンポーネントのインスタンスを取得できない理由

おすすめ