当我们在 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',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)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。