Vue3+Quasar组件传值异常：子组件接收值为undefined求助

一、provide/inject 用法错误 #

你的provide调用参数顺序完全搞反了，Vue的provide方法第一个参数是注入键名（字符串/Symbol），第二个参数才是要传递的值。你写的provide(nums, 'numbers')把值和键名弄反了，而且inject时用的键名'nums'和实际提供的键不匹配，导致接收不到值。

修正后代码： #

// 父组件
<script setup lang="ts">
import { provide } from 'vue'
const nums = [1, 2]
// 正确顺序：键名在前，值在后
provide('numbers', nums)
</script>

// 子组件
<script setup lang="ts">
import { inject } from 'vue'
// 用对应的键名注入
const numbers = inject('numbers')
console.log(numbers) // 现在会输出 [1,2]
</script>

二、Props 用法错误 #

你在props方式里犯了三个关键错误：

1. 父组件没有在模板中给子组件绑定props属性；
2. 子组件打印时用了props.nums，但defineProps里定义的属性名是numbers；
3. 子组件导入父组件import parent from './parent.vue'完全多余，属于无效操作。

修正后代码： #

// 父组件
<script setup lang="ts">
const nums = [1, 2]
</script>

<template>
  <!-- 必须在模板中给子组件绑定props -->
  <ChildComponent :numbers="nums" />
</template>

// 子组件
<script setup lang="ts">
import { PropType } from 'vue'
const props = defineProps({
  numbers: {
    type: Array as () => number[],
    required: true
  }
})
// 打印定义好的props属性名
console.log(props.numbers) // 现在会输出 [1,2]
</script>

内容的提问来源于stack exchange，提问作者Ghazal Nikmanesh