Vue2.x中的父組件數據傳遞至子組件

父組件結構

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>

註意的點：

• 子組件的拼寫方式:vGirlGroup寫成v-girl-group
• 這裡子組件中的綁定數據是:girls="aGirls",這裡的aGirls數據是父組件中的data,girls是要傳遞至子組件的屬性

子組件結構

template

<template>
    <div>
       <ul>
           <li v-for="(value, index) in girls">{{ index }} - {{ value.name }} - {{ value.age }}</li>
       </ul>
    </div>
</template>

註意的點：

• v-for的遍歷對象時的參數順序-變更 具體見:https://cn.vuejs.org/v2/guide/migration.html#v-for-遍歷對象時的參數順序-變更
• 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>

註意點：

• props中的數據是來自在父組件中綁定在子組件上的值 另外:使用IDE、編輯器開發時，可能會提示成prop
• girls中對數據做了一些校驗

結果