vue組件中的props如何使用？

Question

我嘗試在計算值中使用道具，但我不斷收到錯誤消息：

[Vue 警告]：渲染錯誤：“類型錯誤：無法讀取未定義的屬性‘長度’”在 ---> 中找到，位於 src/cmps/space-details/space-imgs.vue 位於 src/pages/space-details。 vue 在 src/App.vue

也許我用錯了道具？ 組件：

<template>
  <div v-if="imgUrls.length" class="space-imgs" :class="pics">
    <img :src="img" v-for="(img, idx) in imgUrls.slice(0, 5)" :key="idx" />
  </div>
</template>

<script>
export default {
  props: { imgUrls: Array },

  computed: {
    pics() {
      return `pics-${this.imgUrls.length}`;
    },
  },
};
</script>

這就是我傳遞道具的方式：

    <space-imgs :imgUrls="space.imgUrls" />

謝謝

Answer 1

您的模板將在傳遞 prop 之前首先呈現，從而使imgUrls未定義。 所以就這樣做： v-if="imgUrls" 。

Answer 2

像下面一樣傳遞道具。 這將起作用。

<space-imgs :img-urls="space.imgUrls" />

用於避免組件中錯誤的道具數據。 用默認值初始化 prop。

props: { 
 imgUrls: {
     type: Array,
     default: [],
     required: true
 } 
}