Vue：如何在每次组件递归执行时捕获一个值？

Question

要求：我想在每次组件递归执行时将对象中的值捕获到数组中。

问题陈述：当组件递归执行时，我可以将组件每次迭代的值推入数组，但每次组件启动时数据属性（数组）都会重置。

我想从每个组件执行中捕获

age

属性的值，并将其存储到子组件本身的数组中。

到目前为止我尝试过什么？

我尝试在从子组件到父组件的每个组件执行中

emit

age

，但它在父组件中仅捕获一次（第一次迭代）。

在子组件中：

const emit = defineEmits(['emitAge']);

.
.
.

emit('emitAge', <age>)

在父组件中：

<child-component @emit-age="captureAge"/>

.
.
.

const captureAge = (val: number) => {
  console.log(val); // It only logs first iteration result, not all iterations
}

我正在使用带有 Composition API 的 Vue 3 (

<script setup>

)。

我可以尝试达到要求的最佳解决方案吗？

Answer 1

您还需要为孩子添加

captureAge

：

<script setup>
 import child from './Child.vue'
 const props = defineProps({age: Number})
 const emit = defineEmits(['emitAge']);

 emit('emitAge', props.age);
 const captureAge = (val) => {
   emit('emitAge', val);
 }
</script>

<template >
  <div v-if="age<5" >
    (from child): {{age}}
    <child
         :age="age+1"
         @emit-age="captureAge"
        ></child>
  </div>
</template>

在此处工作游乐场 - 我不知道如何在游乐场上获取控制台输出，所以我只是将结果添加到

msg