vue3递归实现问卷

在Vue3中，递归可以用于构建复杂的动态结构，比如问卷类型的组件。递归可以帮助处理树状或层级结构的数据，如问题列表，其中每个问题可能包含子问题。下面是一个基础的递归实现思路：

首先，你需要设计一个问卷模型，可能包括问题ID、文本、选项等字段，以及一个children属性来表示是否有子问题：

// 问卷模型
export default {
  name: "Question",
  props: {
    question: { type: Object, required: true },
  },
  template: `
    <li>
      {{question.text}}
      <ul v-if="question.children">
        <Question :question="child" v-for="(child, index) in question.children" :key="index"/>
      </ul>
    </li>
  `,
}

然后，在父组件中，你可以使用v-for遍历数据并渲染`Question`组件，传递当前的问题对象作为props:

<template>
  <div>
    <Question v-for="(item, index) in questionnaire" :key="index" :question="item"></Question>
  </div>
</template>

<script>
import Question from './Question.vue';

export default {
  components: {
    Question,
  },
  data() {
    return {
      questionnaire: [], // 假设这是从API获取的问卷数据
    };
  },
};
</script>

这样，每次迭代都会创建一个新的`Question`实例，如果问题有子问题，会再次调用自身，形成递归结构。