：属性'0”在渲染期间被访问，但未在实例上定义

Question

我对 Vue3 还很陌生，我正在使用 Vue 构建一个小型入门门户，并且在名为 const ProgressStage = ref(0) 的“App.vue”文件中使用全局状态并根据该状态渲染特定组件。

我还必须发出传递的处理程序来更改progressStage的状态

在此处查看代码：

<script setup>
import {ref} from 'vue';
import ComponentA from 'components/componentA.vue' (moc components)
import Component B from 'components/componentB.vue'
const progressStage = ref(0)
const data = ref({})
function handleNavigation(newVal){
  progressStage = newVal
}
function handleClientDataAdd(newData){
 const newData = {...data.value,newData}
 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 内部 -> 另外，正在调用错误的那个： 在

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

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

<template>
<input v-model="data.name" />

我有多个其他组件也使用状态来动态安装自身，但 ComponentB 似乎不断（在输入中的每次击键时）抛出上述警告

希望得到一些帮助

Answer 1

第一个错误是v-show:progressStage === 0。将其更改为：v-show="progressStage === 0"。 文档：v-if-on 模板。p >

并且 已发出 clientDataAdd 但您调用事件：handle-client-data。将其更改为：@client-data-add="handleClientDataAdd"