為什么使用組件內部 data 的數(shù)據(jù)可以 v-for 雙層嵌套，而用來自父組件的 props 里數(shù)據(jù)就不行？

發(fā)現(xiàn) v-for 嵌套 v-for 使用時，如果用的數(shù)據(jù)是自己組件內部 data 里的，就沒有問題；
但是如果用來自父組件傳遞的 props 的數(shù)據(jù)， 就會在第二層 v-for 出問題，會渲染不出來。

想知道原因？

父組件代碼

<template>
  <div id="parent">
    <test-v-for :specProps="specAttrs"></test-v-for>
  </div>
</template>

<script>
  import TestVFor from './TestVFor.vue'
  export default {
    name: 'parent',
    components: {TestVFor},
    data () {
      return {
        specAttrs: [
          {name: '尺碼', list: [46, 47, 48, 49, 50]},
          {name: '顏色', list: ['湖藍色']}
        ]
      }
    }
  }
</script>

<style></style>

子組件代碼

<template>
  <div id="child">
    // 使用自己組件內部的 data
    <h1>v-for by own data</h1>
    <dl v-for="item in specs">
      <dt class="fs24 l">{{item.name}}</dt>
      <dd>
        <a href="javascript:;" v-for="(val, index) in item.list">
          <span>{{ val }}</span>
        </a>
      </dd>
    </dl>
    <hr>
    // 使用自己來自父組件傳遞的 data
    <h1>v-for by props data</h1>
    <dl v-for="item in specProps">
      <dt class="fs24 l">{{item.name}}</dt>
      <dd>
        <a href="javascript:;" v-for="(val, index) in item.list">
          <span>{{ val }}</span>
        </a>
      </dd>
    </dl>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        specs: [
          {name: '尺碼', list: [46, 47, 48, 49, 50]},
          {name: '顏色', list: ['湖藍色']}
        ]
      }
    },
    props: {
      specProps: Array
    }
  }
</script>
<style></style>

渲染效果如下