Vue组件通信

父子组件间的通信

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

//html

  {{message}}
  打开儿子
  

  

//JavaScript
Vue.component('child',{
  props:['childMoney'],
  template:`
    

      我是儿子
      
父亲给了我 {{childMoney}}
      通知父亲关闭儿子
    
  `
})

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

  {{message}}
  打开孙子
  {{grandsonResponse}}
  

  

//JavaScript
Vue.component('child',{
  props:['visible', 'grandsonMoney'],
  template:`
    

      我是儿子
      

      
    
  `
})
Vue.component('grandson',{
  props:['grandsonMoney'],
  template:`
    

      我是孙子
      
爷爷给了我 {{grandsonMoney}}
      通知爷爷关闭孙子
    
  `,
  data:function(){
    return{
      grandsonResponse: '收到爷爷给的钱了'
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: "我是爷爷",
    grandsonVisible: false,
    giveGrandsonMoney: '500元',
    grandsonResponse:''
  }
})

总结一下

• 爷爷无法直接控制孙子的显示，它是通过传入一个值给爸爸，然后在爸爸上根据这个值来控制孙子的显示
• 爷爷给孙子传值也要通过爸爸一层一层传入
• 孙子通知爷爷关闭自己，爷爷上面无法直接监听孙子的关闭自己的事件，需要先通过爸爸监听，然后在爸爸的监听里面在emit一个关闭孙子的事件，这时才可以在爷爷上监听这个事件，并且控制孙子的关闭，因为不能直接在爷爷上监听的原因，孙子给爷爷传值，也是要一层一层往上emit来传值
• $event是Vue提供的，它指的是监听的事件传过来的值

兄弟组件间（任意两个不相干的组件）的通信

a组件给b组件发送消息

//html

  
  

//JavaScript
let eventHub = new Vue()
Vue.prototype.$eventHub = eventHub

Vue.component('component-a', {
  template: '
a发送a的消息
',
  methods:{
    notify(){
      this.$eventHub.$emit('xxx', '我是a')
    }
  }
})

Vue.component('component-b', {
  template: '
b
',
  created(){
    this.$eventHub.$on('xxx', (data)=>{
      this.$refs.output.textContent = data
    })
  }
})

new Vue({
  el: '#app',
})

总结一下

• new Vue()也相当与构造了一个eventHub，（其实是构造了一个vue对象，对象中包含$emit和$on方法
• 把这个eventHub放到Vue的原型上