[分享]如何遍历vueprop

当我们在 Vue 中使用组件时，经常会用到组件的 prop 属性。那么如何遍历 Vue prop 呢？下面将为大家详细介绍。

1、遍历单个 prop

Vue.component('demo', {
  props: ['info'],
  template: '
    <div>
      <p>Name：{{ info.name }}</p>
      <p>Age：{{ info.age }}</p>
    </div>
  '
})

在这个例子中，demo 组件的 prop 为 info，我们需要展示 info 中的 name 和 age，那么如何遍历呢？

Vue.component('demo', {
  props: ['info'],
  template: '
    <div>
      <p v-for="(value, key) in info">{{ key }}：{{ value }}</p>
    </div>
  '
})

在 template 中，我们使用了 v-for 循环展示了 info 的数据

2、遍历多个 prop

有的时候，我们不仅需要遍历单个 prop，还需要遍历多个 prop。下面，我们看一下如何实现：

<template>
  <div>
    <p v-for="(prop, index) in $props">{{ prop }}：{{ $props[prop] }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: 'Jonh'
      },
      age: {
        type: Number,
        default: 18
      }
    }
  }
</script>

在这个例子中，我们在 template 中使用了 v-for 循环遍历了组件的所有 prop。$props 是一个 Vue 特殊变量，能够返回所有的 prop 数组。需要注意的是，$props 只会返回 props，不会返回父组件传递过来的其他属性（比如 class 和 style）。