富贵资源网 Design By www.hznty.com
父组件结构
template
<template> <div> <v-girl-group :girls="aGirls"></v-girl-group> </div> </template>
script
<script>
import vGirlGroup from './GirlGroup'
export default {
name: 'girl',
components: {
vGirlGroup
},
data () {
return {
aGirls:[{
name:'小丽',
age:22
},{
name:'小美',
age:21
},{
name:'小荷',
age:24
}]
}
}
}
</script>
注意的点：
"aGirls",这里的aGirls数据是父组件中的data,girls是要传递至子组件的属性
子组件结构
template
<template>
<div>
<ul>
<li v-for="(value, index) in girls">{{ index }} - {{ value.name }} - {{ value.age }}</li>
</ul>
</div>
</template>
注意的点：
"external nofollow" href="https://cn.vuejs.org/v2/guide/migration.html#index-and-key">https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除
<script>
export default {
name: 'girl-group',
props: {
girls: {
type: Array,
required: true
}
}
}
</script>
注意点：
"text-align: center">
以上所述是小编给大家介绍的Vue2.x中的父组件数据传递至子组件，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...