mpvue微信小程式的父向子元件傳值的thirdScriptError

報錯資訊：

VM15059:1 thirdScriptError

Cannot read property ‘url’ of undefined;at pages/history/history page lifeCycleMethod onReady function

TypeError: Cannot read property ‘url’ of undefined

如圖所示：

子元件

<template>
    <div class="goods-list-page">
      <div class="goods-list-container" >
        <image class="goods-list-img" :src="goodsList.url"/>
        <p class="goods-list-text">{{goodsList.text}}</p>
        <p class="goods-list-money">{{goodsList.money}}</p>
      </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {

            }
        },
        props: {
          goodsList:{
            type:Object,
            required:true
          }
        }
    }
</script>
           

父頁面

<template>
    <div>
      <goods-list v-for="(item,index) in goods"
                  :key="index"
                  :goodsList="item">
      </goods-list>
    </div>
</template>

<script>
  import goodsList from './components/goods.list';
    export default {
        data () {

            return {
              goods:[
                {
                  url:'../../../../static/history/history-list-1.jpg',
                  text:'無印良品懶人沙…',
                  money:'￥129'
                },
                {
                  url:'../../../../static/history/history-list-2.jpg',
                  text:'無印良品懶人沙…',
                  money:'￥129'
                },
                {
                  url:'../../../../static/history/history-list-3.jpg',
                  text:'無印良品懶人沙…',
                  money:'￥129'
                },
                {
                  url:'../../../../static/history/history-list-4.jpg',
                  text:'無印良品懶人沙…',
                  money:'￥129'
                }
              ]
            }
        },
      components: {
        goodsList
      }
    }
  }
</script>
           

解決辦法：

在子元件的props裡面添加一個default () {return {}}，如下：

props: {
          goodsList:{
            type:Object,
            required:true,
            default () {
              return {}
            }
          }
        }