[TOC]
## 父子通信
```
<div id="app">
<user username="whh"></user>
</div>
```
```
Vue.component('user', {
template: '<a :href="'/user/' + username " >@{{username}}</a> ',
//注冊父組件傳遞的數據
props: ['username'],
})
new Vue({
el: '#app',
})
```
### props
> 一個組件默認可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。在上述模板中，你會發現我們能夠在組件實例中訪問這個值，就像訪問 data 中的值一樣。
## 子父通信
>用子組件觸發事件來傳參
```
<div id="app">
<balance></balance>
</div>
```
```
//父組件
Vue.component('balance',{
template:`
<div>
<show @show-balance="show= true"></show>
<div v-if="show">
你的余額為100
</div>
</div>
`,
data:function(){
return{
show:false
}
},
methods:{
show_balance:function(){
this.show = true
}
}
})
//子組件
Vue.component('show',{
template:'<button @click="on_click">顯示余額</button>',
methods:{
on_click(){
//觸發事件show-balance,同時可以傳數據{a=1,b=2}
//this.$emit('事件',{data})
this.$emit('show-balance',{a:1,b:2})
}
}
})
new Vue({
el:'#app',
})
```
