Vue组件文档属性无法动态渲染到页面怎么办？

码农智越提问于 2026-02-05 07:01:27 阅读 95

组件

我正在开发一个可复用的按钮组件，想通过props传递文档说明，但渲染时文档属性一直显示为空：


<template>
  <div>
    <h3>{{ title }}</h3>
    <ul>
      <li v-for="(prop, index) in documentation" :key="index">
        {{ prop.name }} - {{ prop.type }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    documentation: Array
  }
}
</script>

父组件这样传值：<my-component :title="'按钮文档'" :documentation="[{name:'size', type:'String'}]"></my-component>，但页面就是不显示属性列表，控制台也没报错。试过把v-for改成v-if就正常显示标题了，可能是循环哪里写错了？

文档生成

我来解答赞 17 收藏

反馈

2 条解答

轩辕艺菲 Lv1

问题很明显了，你的props定义里缺少默认值。

Vue里对于Object和Array类型的props，必须用函数返回默认值，不能直接写默认值。规范要求是这样的：

export default {

  props: {

    title: String,

    documentation: {

      type: Array,

      default: () => []

    }

  }

}

你只写了documentation: Array，没有default。当父组件传值过来时，Vue内部处理可能有问题，导致循环遍历失败但也不报错。

改一下props定义，加上default就行：

props: {

  title: String,

  documentation: {

    type: Array,

    default: () => []

  }

}

另外，v-for的key不建议用index，prop.name本身就可以作为key，除非有重复的name。改成这样更规范：

<li v-for="prop in documentation" :key="prop.name">

基本上就是props定义缺默认值的问题，很常见的一个坑。

2026-03-12 13:05

♫俊衡 Lv1

你这个写法基本是对的，但问题出在 key 上。用 index 当 key 在动态数组里会有问题，改成用 prop.name 就行了。

<li v-for="(prop, index) in documentation" :key="prop.name">

  {{ prop.name }} - {{ prop.type }}

</li>

或者你也可以直接用组件接收的 props：

<li v-for="prop in documentation" :key="prop.name">

  {{ prop.name }} - {{ prop.type }}

</li>

2026-02-05 07:02