Question

如何在 vue 组件中使用 props？

2021-07-18

70

javascript vue.js

我尝试在计算值中使用 prop，但一直出现错误：

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined" found in ---> at src/cmps/space-details/space-imgs.vue at src/pages/space-details.vue at src/App.vue

也许我使用 prop 的方式不对？组件：

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

这是我传递 prop 的方式：

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

谢谢

Answer 1

像下面这样传递 prop。这会起作用。

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

为了避免组件中的 prop 数据错误。使用默认值初始化 prop。

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

Answer 2

您的模板将在传递 prop 之前首先进行渲染，从而使 imgUrls 未定义。因此只需执行以下操作： v-if="imgUrls" 。