vue 項(xiàng)目中 “父組件” 異步獲取數(shù)據(jù)之后，傳遞給子組件不顯示

有兩個(gè)組件：一個(gè)為 transaction（父組件），一個(gè)為 transactionList （子組件）；
上圖為一個(gè)列表頁，為父組件，在父組件里面的data中定義了數(shù)據(jù)列表，
template中：

<transactionList :list="transactionList"></transactionList>

js中：

data () {
    return {
      transactionList: [...]
    }
}

子組件通過 props 接受一個(gè) list 顯示出來沒有問題。
但是，問題是，現(xiàn)在這些數(shù)據(jù)我通過 axios 取得：

methods: {
    getTransData () {
      axios.get(httpUrl.getTransData)
      .then(res => {
        console.log(res.data.transData)
        this.transactionList = res.data.transData
      })
      .catch(err => console.log(err))
   }
},
created () {
   this.getTransData()
}

created 的時(shí)候把數(shù)據(jù)獲取到，然后賦值給 data 中的 transactionList ，
因?yàn)槭褂昧?axios 獲取數(shù)據(jù)，所以 data 中的 transactionList 為空數(shù)組：
transactionList: [ ]
但是這樣寫完之后，頁面什么也不顯示了，控制臺(tái)輸出之后發(fā)現(xiàn)數(shù)據(jù)也獲取到了， 賦值給 this.transactionList 也成功了，但是貌似是沒有傳到子組件中，這是為什么？

子組件：

<template>
  <div>
    <div class="ui segment"
      v-for="item in items"
      :class="[item.status ? 'green' : 'red']">
      <div class="ui list m-aa">
        <div class="item" :class="[item.status ? 'text-green' : 'text-red']">
          <h3 v-if="item.status">交易金額：{{ item.tstMoney }} 元</h3>
          <h3 v-else>取消消費(fèi)：{{ item.tstMoney }} 元</h3>
        </div>
        <div class="item m-gray">
          {{ item.tstTime }}
        </div>
      </div>
      <div class="ui list">
        <div class="item">
          消費(fèi)門店：{{ item.tstAddress }}
        </div>
      </div>
      <div class="ui bulleted list m-gray">
        <div class="item">
          預(yù)存支付：{{ item.tstJifen }}
        </div>
        <div class="item">
          積分支付：{{ item.tstYucun }}
        </div>
        <div class="item">
          其他支付：{{ item.tstElse }}
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      items: this.list
    }
  }
}
</script>

父組件：

<template>
  <div class="m-bg" style="padding-left: 10px; padding-right: 10px;">
    <transactionList :list="transactionList"></transactionList>
  </div>
</template>

<script>
import transactionList from '../components/transactionList'
import axios from 'axios'
import { httpUrl } from '../../http_url.js'
export default {
  components: {
    transactionList
  },
  data () {
    return {
      transactionList: []
    }
  },
  methods: {
    getTransData () {
      axios.get(httpUrl.getTransData)
      .then(res => {
        // console.log(res.data.transData)
        console.log(this.transactionList)
        this.transactionList = res.data.transData
        console.log(this.transactionList)
        // console.log(this.transactionList)
      })
      .catch(err => console.log(err))
    }
  },
  created () {
    this.getTransData()
  }
}
</script>