Vue如何实现组件间通信

目录

• 1. 父子间通信

• 1.1 父组件 --> 儿子组件
• 1.2 儿子组件 --> 父组件

• 3.1 EventBus
• 3.2 Vuex

//child.vue
<template>
    <div>
        我是儿子，我收到来自父亲的数据为 {{value}}
    </div>
</template>
<script>
export default {
    props:{
        value: String
    }
}

//App.vue
<template>
  <div id="app">
    <Child :value="x" />
  </div>
</template>
<script>
import Child from './components/Child'
export default {
  data(){
    return {
      x: 'hi,child'
    }
  },
  components:{
    Child
  }
}
</script>

//child.vue
<template>
    <div>
        我是儿子，我收到来自父亲的数据为 {{value}}
        <button @click="sayHi">
            向父组件打招呼
        </button>
    </div>
</template>
<script>
export default {
    props:{
        value: String
    },
    methods:{
        sayHi(){
            this.$emit('sayHi','hi,parent!');
        }
    }
}
</script>

//App.vue
<template>
  <div id="app">
    我是父组件，我收到子组件传来的数据为 {{y}}
    <Child :value="x" @sayHi="y = $event"/>
  </div>
</template>
<script>
import Child from './components/Child'
export default {
  data(){
    return {
      x: 'hi,child',
      y: ''
    }
  },
  components:{
    Child
  }
}
</script>

const eventBus = new Vue();
eventBus.$emit(eventName, […args]) //发布事件
eventBus.$on(event, callback)      //订阅事件

// eventBus.js
import Vue from 'vue'
export const eventBus = new Vue();

//child
<template>
    <div>
        我是儿子，我收到来自父亲的数据为 <span>{{value}}</span>
        <button @click="sayHi">
            向父组件打招呼
        </button>
        <button @click="sibling">
            向兄弟组件打招呼
        </button>
    </div>
</template>
<script>
import {eventBus} from '../eventBus.js'
export default {
    props:{
        value: String
    },
    methods:{
        sayHi(){
            this.$emit('sayHi','hi,parent!');
        },
        sibling(){
            eventBus.$emit('sibling','hi,brother');
        }
    }
}
</script>
<style scoped>
    span{
        color: red;
    }
</style>

//sibling
<template>
    <div>
        我是兄弟组件，我收到来自儿子组件的数据信息为 <span>{{x}}</span> 
    </div>
</template>
<script>
import {eventBus} from '../eventBus.js'
export default {
    data(){
        return {
            x: ''
        }
    },
    mounted(){
        eventBus.$on('sibling', (msg)=>{
            this.x = msg;
        })
    }
}
</script>
<style scoped>
    span{
            color: green;
    }
</style>

//parent
<template>
  <div id="app">
    我是父组件，我收到子组件传来的数据为 <span>{{y}}</span>
    <Child :value="x" @sayHi="y = $event"/>
    <Sibling></Sibling>
  </div>
</template>
<script>
import Child from './components/Child'
import Sibling from './components/Sibling'
export default {
  data(){
    return {
      x: 'hi,child',
      y: ''
    }
  },
  components:{
    Child,
    Sibling
  }
}
</script>
<style scoped>
    span{
            color: blue;
    }
</style>

//main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
Vue.prototype.$eventBus = new Vue();//添加这句，一定要在下方的 new Vue 前。
new Vue({
  render: h => h(App),
}).$mount('#app')

//child
sibling(){
    this.$eventBus.$emit('sibling','hi,brother');
}

//sibling
mounted(){
    this.$eventBus.$on('sibling', (msg)=>{
        this.x = msg;
    })
}

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
let eventBus = new Vue()
Object.defineProperty(Vue.prototype,'$eventBus',{
  get(){
    return eventBus
  }
})
new Vue({
  render: h => h(App),
}).$mount('#app')