Vue组件间通信-白红宇

父子组件间通信

html:


        
     {
   { message }}
    
         
       
    
复制代码

js:

new Vue({  el: '#app',  data: {    message: '我是爸爸!',    visible: false,  }})Vue.component('child', {  template:`  
    
      我是儿子   
       
    
`,})复制代码

爷孙组件间通信

爷孙组件无法直接通信需要爷 > 父 > 孙来传递间接通讯爷孙组件就是两个父子通讯组装而来

html:


        
     {
   { message }}
    
         
       
    
复制代码

js:

Vue.component('father', {  props: ['visible'],  template:`  
    
      我是父   
       
    
`,})Vue.component('grandchild', {  template:`  
    
      我是孙   
       
    
`,})new Vue({  el: '#app',  data: {    message: '我是爷',    visible: false,  }})复制代码

兄弟组件间通信

props来传递数据

html:


        
     {
   { message }}
    
         
       
    
复制代码

js:

Vue.component('elder-brother', {  props: ['visibleYounger'],  template:`  
    
      我是兄   
       
    
`,})Vue.component('younger-brother', {  props: ['visibleElder'],  template:`  
    
      我是弟   
       
    
`,})new Vue({  el: '#app',  data: {    message: '兄弟通讯',    visibleElder: true,    visibleYounger: true,  }})复制代码

eventHub 绑定到 Vue 的原型上 http://jsbin.com/sovarem/edit?html,js,output

html:


        
     {
   { message }}
    
     
      打开
         
     
      打开
       
    
复制代码

js:

let eventHub = new Vue()Vue.prototype.$eventHub = eventHubVue.component('elder-brother', {  data() {    return {      visibleElder: true,    }  },  template:`  
    
      我是兄   
       
    
`,  created(){    this.$eventHub.$on('elder',()=>{      this.$data.visibleElder = !this.$data.visibleElder    })  },  methods:{    younger(){      this.$eventHub.$emit('younger')    }  },})Vue.component('younger-brother', {  data() {    return {      visibleYounger: true,    }  },  template:`  
    
      我是弟   
       
    
`,  created(){    this.$eventHub.$on('younger',()=>{      this.$data.visibleYounger = !this.$data.visibleYounger    })  },  methods:{    elder(){      this.$eventHub.$emit('elder')    }  },})new Vue({  el: '#app',  data: {    message: '兄弟通讯',  }})复制代码