嘗試過的方式一：

遞歸組件的父組件中：

<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);
  }

這兩種方式都使數(shù)據(jù)更新了，但是視圖并沒有得到更新，為什么？

更新：

突然發(fā)現(xiàn)造成視圖不更新的因素了。以下為遞歸組件代碼：

<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"就是一大坑，刪除它就完全正常了。這是為什么呢？