假設有如下元件：

/*js*/
Vue.component('my-button',{
    tempalte:'<button>一個按鈕</button>'
})
var app3 = new Vue({
    el:'#app3',
    data:{
        message:0
    }
})
/*html*/
<div id="app3">
    <mybutton></mybutton>
</div>

父元件和子元件是相對於作用域而言的。因為他們都是Vue()的例項，有各自獨立的作用域。

先理清誰是父誰是子。

<div id="app3"></div> //父

<button>一個按鈕</button> //子

首先，父可以傳資料給子。
也就是app3的資料給button 。

怎麼傳？

通過元件的一個屬性props.
現在對上面的元件加上這個屬性，變成了下面這樣。

/*js*/
Vue.component('my-button',{
    props:['deliver'],
    tempalte:'<button>{{deliver}}</button>'
})
var app3 = new Vue({
    el:'#app3'
 
,
    data:{
        message:'把我傳給子元件'
    }
})

//html
<div id="app3">
    <my-button v-bind:deliver="message"></my-button>
</div>

這樣就成功的將父的資料傳給子了。

要注意的是，porps裡不能有- ，不能有駝峰。

父傳給子的這個message是單向繫結的，app3.message如果改變了，那子模板也會改變。
如果子模板想要加工從porps中得到的資料從而變成自己想要的資料，可以使用 computed屬性，這時候，元件就改成了這樣：

Vue.component('my-button',{
    props:['deliver'],
    tempalte:'<button>{{counter}}</button>'
    computed:{
        counter:function(){
            return this.deliver+'hello world'
        }
    }
})

現在，你的資料被加工成，message+’hello world’了，而且會根據message的變化而變化。