Vue3开发报错：Property '0'未定义，请求技术排查帮助

核心错误：v-show 语法写法错误 #

你看到的警告直接原因是v-show的语法写错了。原来的写法：

v-show:progressStage === 0

Vue会把:progressStage解析成v-show的参数，后面的=== 0会被当成模板表达式，尝试访问组件实例上的0属性——但你的组件实例根本没有这个属性，所以抛出警告。正确写法是用双引号把整个判断表达式包起来：

v-show="progressStage === 0"

ComponentB的v-show也要同步修正：

v-show="progressStage === 1"

其他需修复的代码问题 #

1. Ref值修改错误 #

ref对象必须通过.value来修改值，直接赋值会覆盖ref引用，导致状态完全失效：

// 错误写法
function handleNavigation(newVal){
  progressStage = newVal
}

// 正确写法
function handleNavigation(newVal){
  progressStage.value = newVal
}

2. 组件导入语法错误 #

导入ComponentB时组件名带空格，会导致导入失败：

// 错误写法
import Component B from 'components/componentB.vue'

// 正确写法
import ComponentB from 'components/componentB.vue'

3. 变量重复声明错误 #

handleClientDataAdd里重复声明了newData，会触发语法错误：

// 错误写法
function handleClientDataAdd(newData){
 const newData = {...data.value,newData}
 data.value = newData;
} 

// 正确写法（同时修正对象展开的语法）
function handleClientDataAdd(newData){
  data.value = {...data.value, ...newData};
}

4. ComponentB的语法漏洞 #

• defineEmits缺少闭合括号
• <script>标签未闭合
• 模板里用了@handle-client-data，但defineEmits里写的是clientDataAdd，需要保持事件名一致：

<script setup>
import {ref} from 'vue'
const emits = defineEmits(['handlePageNav', 'handleClientData'])

const data = ref({
  name:''
})
</script>

<template>
  <input v-model="data.name" @input="emits('handleClientData', data.value)" />
</template>

修复后的完整代码示例 #

App.vue #

<script setup>
import {ref} from 'vue';
import ComponentA from 'components/componentA.vue';
import ComponentB from 'components/componentB.vue';

const progressStage = ref(0);
const data = ref({});

function handleNavigation(newVal){
  progressStage.value = newVal;
}

function handleClientDataAdd(newData){
  data.value = {...data.value, ...newData};
} 
</script>

<template>
  <ComponentA v-show="progressStage === 0" />
  <ComponentB 
    @handle-page-nav="handleNavigation" 
    @handle-client-data="handleClientDataAdd" 
    v-show="progressStage === 1" 
  />
</template>

ComponentB.vue #

<script setup>
import {ref} from 'vue';
const emits = defineEmits(['handlePageNav', 'handleClientData']);

const data = ref({
  name:''
});
</script>

<template>
  <input v-model="data.name" @input="emits('handleClientData', data.value)" />
  <button @click="emits('handlePageNav', 2)">下一步</button>
</template>

修复完以上所有问题后，ComponentB的警告会消失，整个状态逻辑也能正常运行。

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