1.父元件向子元件傳遞資料

<div id="box">
    <aaa></aaa>
</div>

• 1
• 2
• 3

• 1
• 2
• 3

<template id="aaa">
    <h1>模板aaa=>{{msg1}}</h1>   //msg1寫在這裡是可以的，因為這是父元件內部
    //<bbb>{{msg1}}</bbb>          //這種寫法是不可以的，這是在子元件內部，要在這裡顯示父元件的數
                                //據，需要用props定義屬性
    <bbb
 
 :m='msg1'></bbb>
</template>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

var vm=new Vue({
    el:"#box",
    data () {
        a:'aaa'
    },
    components:{
        'aaa':{
            data () {
                msg1:'父元件的資料'
            },
            template:'#aaa',
            components:{
                'bbb'
 
:{
                //  props:['m'],       //這是一種寫法，props以陣列的形式定義屬性
                props：{
                    'm':String           //這是第二種寫法，物件的形式
                },
                    template:'<h3>這是子元件bbb--{{m}}</h3>'
                }
            }
        },
    }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

從這個例子中可以看出，父元件向子元件傳遞資料，因為每一個元件都是獨立的作用域，所以要把父元件的資料在子元件中顯示，要使用props定義屬性來繫結父元件裡面的資料才可以，如這裡父元件的資料是msg1，用props定義一個屬性m，來接收資料msg1；在子元件的模板裡面用{{m}}的形式顯示父元件的資料