父子组件间的通信

父亲需要怎么控制儿子的显示和隐藏

//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的原型上