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