[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',
})
```
