尝试过的方式一：

递归组件的父组件中：

<plan-preview :sectionList="sectionList"></plan-preview>

递归组件中：

<plan-section-list v-if="section.children" :sectionList="section.children"></plan-section-list>

  name: 'planSectionList',
  props: {
    sectionList: Array
  },
  mounted() {
    _.forEach(this.sectionList, async section => {
      const res = await this.$api.plan.getSectionDetails(section.id);
      this.$set(section, 'details', res.data.data);
    });
  }

尝试过的方式二：

递归组件的父组件中：

<plan-preview :sectionList.sync="sectionList"></plan-preview>

递归组件中：

<plan-section-list v-if="section.children" :sectionList.sync="section.children"></plan-section-list>

  name: 'planSectionList',
  props: {
    sectionList: Array
  },
  mounted() {
    _.forEach(this.sectionList, async section => {
      const res = await this.$api.plan.getSectionDetails(section.id);
      this.$set(section, 'details', res.data.data);
    });
    this.$emit('update:sectionList', this.sectionList);
  }

这两种方式都使数据更新了，但是视图并没有得到更新，为什么？

更新：

突然发现造成视图不更新的因素了。以下为递归组件代码：

<template>
  <ul class="plan-preview__section-list">
    <li v-for="section in sectionList" :key="section.id">
      <div class="plan-preview__section" @click="section.show = !section.show">
        <h4 class="plan-preview-section__title">{{section.title}}</h4>
        <div v-show="section.show" class="plan-preview-section__body">
          <p class="plan-preview-section__content">{{section.content}}</p>
          <p>测试：{{section.details}}</p>
        </div>
      </div>
      <plan-section-list v-if="section.children" :sectionList.sync="section.children"></plan-section-list>
    </li>
  </ul>
</template>

其中，section.details用来测试视图是否更新。其父元素v-show="section.show"就是一大坑，删除它就完全正常了。这是为什么呢？