父組件結(jié)構(gòu)
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>注意的點(diǎn)：
•子組件的拼寫方式:vGirlGroup寫成v-girl-group
•這里子組件中的綁定數(shù)據(jù)是:girls="aGirls",這里的aGirls數(shù)據(jù)是父組件中的data,girls是要傳遞至子組件的屬性
子組件結(jié)構(gòu)
template
<template> <div> <ul> <li v-for="(value, index) in girls">{{ index }} - {{ value.name }} - {{ value.age }}</li> </ul> </div></template>注意的點(diǎn)：
•v-for的遍歷對象時的參數(shù)順序-變更 具體見:https://cn.vuejs.org/v2/guide/migration.html#v-for-遍歷對象時的參數(shù)順序-變更
•v-for中$index和$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>注意點(diǎn)：
•props中的數(shù)據(jù)是來自在父組件中綁定在子組件上的值 另外:使用IDE、編輯器開發(fā)時，可能會提示成prop
•girls中對數(shù)據(jù)做了一些校驗(yàn)
結(jié)果
以上所述是小編給大家介紹的Vue2.x中的父組件數(shù)據(jù)傳遞至子組件，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
新聞熱點(diǎn)
疑難解答
