Vue组件间通信

父子组件间通信

html:

  <div id="app">
    <p>{{ message }}</p>
    <button @click="visible=true">打开</button>
    <child v-show=visible @close="visible=false"></child>
  </div>

js:

new Vue({
  el: '#app',
  data: {
    message: '我是爸爸!',
    visible: false,
  }
})

Vue.component('child', {
  template:`
  <div> 我是儿子
   <button @click="$emit('close')">关闭</button>
  </div>
`,
})

爷孙组件间通信

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

html:

  <div id="app">
    <p>{{ message }}</p>
    <button @click="visible=true">打开</button>
    <father :visible='visible'  @close="visible=false"></father>
  </div>

js:

Vue.component('father', {
  props: ['visible'],
  template:`
  <div> 我是父
   <grandchild v-show="visible" @close="$emit('close')"></grandchild>
  </div>
`,
})

Vue.component('grandchild', {
  template:`
  <div> 我是孙
   <button @click="$emit('close')">关闭</button>
  </div>
`,
})

new Vue({
  el: '#app',
  data: {
    message: '我是爷',
    visible: false,
  }
})

兄弟组件间通信

props来传递数据

html:

  <div id="app">
    <p>{{ message }}</p>
    <elder-brother  v-show="visibleElder" @younger="visibleYounger= !visibleYounger"></elder-brother>
    <younger-brother v-show="visibleYounger" @elder="visibleElder= !visibleElder"></younger-brother>
  </div>

js:

Vue.component('elder-brother', {
  props: ['visibleYounger'],
  template:`
  <div> 我是兄
   <button @click="$emit('younger')">打开关闭弟</button>
  </div>
`,
})

Vue.component('younger-brother', {
  props: ['visibleElder'],
  template:`
  <div> 我是弟
   <button @click="$emit('elder')">打开关闭兄</button>
  </div>
`,
})

new Vue({
  el: '#app',
  data: {
    message: '兄弟通讯',
    visibleElder: true,
    visibleYounger: true,
  }
})

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

html:

  <div id="app">
    <p>{{ message }}</p>
    <elder-brother>打开</elder-brother>
    <younger-brother>打开</younger-brother>
  </div>

js:

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

Vue.component('elder-brother', {
  data() {
    return {
      visibleElder: true,
    }
  },
  template:`
  <div v-show="visibleElder"> 我是兄
   <button v-show="visibleElder" @click="younger">打开关闭弟</button>
  </div>
`,
  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:`
  <div v-show="visibleYounger"> 我是弟
   <button @click="elder">打开关闭兄</button>
  </div>
`,
  created(){
    this.$eventHub.$on('younger',()=>{
      this.$data.visibleYounger = !this.$data.visibleYounger
    })
  },
  methods:{
    elder(){
      this.$eventHub.$emit('elder')
    }
  },
})

new Vue({
  el: '#app',
  data: {
    message: '兄弟通讯',
  }
})