Vue 属性传值Props
2018-12-27 本文已影响0人
祝名
一.父组件向子组件传值
1. 我们在Users.vue组件中建立了一个循环遍历对象
2. 如果这个users数组我们想应用于多个子组件中,就需要挨个复制,十分麻烦,我么可以把users数组放在根组件App.vue中,通过属性传值,以供大家使用。
3. App.vue与Users.vue组件的唯一连接点在于,根组件的template模板中对于users标签的引用。
4. 所以,我们在users标签上自定义一个属性users(这里可以任意起名字),属性值为data里面的users数组,<users v-bind:users="users"></users>。
5. 绑定好属性后,我们要在Users.vue文件中获取他,所以在export default中,加入属性传输至props属性。props:["users"],这里users代表着刚刚users标签中的属性名users。这样就可以正常使用循环遍历功能了。
6. 关于props的标准写法
是以对象的形式书写,属性名users中存在两个属性,type数据形式,required该数据形式的数据是否符合其规定。如果有更多属性传值,可以继续在props中书写。
props:{
users:{
type:Array,
required:true
}
}