父子组件间的通信
父亲需要怎么控制儿子的显示和隐藏
//html
<div id="app">
<span>{{message}}</span>
<button @click='childVisible=true'>打开儿子</button>
<hr>
<child v-show="childVisible" v-on:close-child='childVisible=false' v-bind:child-money='giveChildMoney'></child>
</div>
//JavaScript
Vue.component('child',{
props:['childMoney'],
template:`
<div>
<span>我是儿子</span>
<p>父亲给了我 {{childMoney}}</p>
<button @click="$emit('close-child')">通知父亲关闭儿子</button>
</div>
`
})
var app = new Vue({
el: '#app',
data: {
message: '我是父亲',
childVisible: false,
giveChildMoney: '500元'
}
})
总结一下
- 父亲控制自己的子组件的显示
- 父亲通过v-bind:child-money='giveChildMoney'来给儿子传值，注意:child-money要符合html规范，不能有大写，不能写成childMoney
- 儿子通过props接收父亲传入的值，此处是js，可以大写，写成childMoney
- 孩子通知父亲是通过$emit('xxx')来实现的，在父亲中监听v-on:xxx
爷孙组件间的通信
爷爷需要控制孙子的显示和隐藏
//html
<div id="app">
{{message}}
<button v-on:click="grandsonVisible=true;grandsonResponse=''">打开孙子</button>
{{grandsonResponse}}
<hr>
<child v-bind:visible="grandsonVisible" v-on:close-grandson="grandsonVisible=false;grandsonResponse = $event" v-bind:grandson-money="giveGrandsonMoney"></child>
</div>
//JavaScript
Vue.component('child',{
props:['visible', 'grandsonMoney'],
template:`
<div>
<span>我是儿子</span>
<hr>
<grandson v-show="visible" v-on:close-grandson="$emit('close-grandson',$event)" v-bind:grandson-money="grandsonMoney"></grandson>
</div>
`
})
Vue.component('grandson',{
props:['grandsonMoney'],
template:`
<div>
<span>我是孙子</span>
<p>爷爷给了我 {{grandsonMoney}}</p>
<button @click="$emit('close-grandson', grandsonResponse)">通知爷爷关闭孙子</button>
</div>
`,
data:function(){
return{
grandsonResponse: '收到爷爷给的钱了'
}
}
})
var app = new Vue({
el: '#app',
data: {
message: "我是爷爷",
grandsonVisible: false,
giveGrandsonMoney: '500元',
grandsonResponse:''
}
})
总结一下
- 爷爷无法直接控制孙子的显示，它是通过传入一个值给爸爸，然后在爸爸上根据这个值来控制孙子的显示
- 爷爷给孙子传值也要通过爸爸一层一层传入
- 孙子通知爷爷关闭自己，爷爷上面无法直接监听孙子的关闭自己的事件，需要先通过爸爸监听，然后在爸爸的监听里面在emit一个关闭孙子的事件，这时才可以在爷爷上监听这个事件，并且控制孙子的关闭，因为不能直接在爷爷上监听的原因，孙子给爷爷传值，也是要一层一层往上emit来传值
- $event是Vue提供的，它指的是监听的事件传过来的值
兄弟组件间（任意两个不相干的组件）的通信
a组件给b组件发送消息
//html
<div id="app">
<component-a></component-a>
<component-b></component-b>
</div>
//JavaScript
let eventHub = new Vue()
Vue.prototype.$eventHub = eventHub
Vue.component('component-a', {
template: '<div>a<button @click="notify">发送a的消息</button></div>',
methods:{
notify(){
this.$eventHub.$emit('xxx', '我是a')
}
}
})
Vue.component('component-b', {
template: '<div>b<div ref="output"><div></div>',
created(){
this.$eventHub.$on('xxx', (data)=>{
this.$refs.output.textContent = data
})
}
})
new Vue({
el: '#app',
})
总结一下
- new Vue()也相当与构造了一个eventHub，（其实是构造了一个vue对象，对象中包含$emit和$on方法
- 把这个eventHub放到Vue的原型上
