vue组件之间通信方式

      • 一、全局事件总线
      • 二、props和$emit
      • 三、Vuex（状态管理）
      • 四、$refs
      • 五、provide / inject

一、全局事件总线

范围：任意组件间
步骤：1、创建事件总线
第一种方式：通过自定义事件总线方式

import Vue from 'vue';export const globalBus = new Vue();

局部引用

import { globalBus } from '@/utils/globalBus'globalBus.$emit('message-count', num) //发送消息globalBus.$on('message-count', (num) => {}) //接收消息

第二种方式：通过原型绑定

main.js

new Vue({el: '#app',render: h => h(App),beforeCreate(){Vue.prototype.$bus = this}})

局部引用

 this.$bus.$emit('message-count',num); //发送消息 this.$bus.$on('hello',(num)=>{}); //接收消息

解绑事件

beforeDestroy(){this.$bus.$off('message-count')}

二、props和$emit

范围：父子组件间

父组件

<template><child-component :message="parentMessage" @update="handleUpdate"></child-component></template><script>export default {data() {return {parentMessage: 'Hello from parent',};},methods: {handleUpdate(message) {console.log('Received from child:', message);},},};</script>

子组件

<template><div><p>{{ message }}</p><button @click="sendMessage">Send Message</button></div></template><script>export default {props: ['message'],methods: {sendMessage() {this.$emit('update', 'Hello from child');},},};</script>

三、Vuex（状态管理）

范围：多个组件之间共享状态，可以访问和修改共享的状态
1、在根组件中创建和配置Vuex

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);export default new Vuex.Store({state:{message: 'message from Vuex'},mutations:{updateMessage(state,msg){state.message = msg ;}}})

2、在子组件中使用Vuex和触发mutations

export default {computed:{message(){return this.$store.state.message}},methods:{sendMessage(){this.$store.commit('updateMessage','mes from component')}}}

四、$refs

范围：父组件访问子组件

父组件

<template> <div> <child-component ref='child'></child-component> <button @click='sendMessage'></button></div></template><script>export default {methods:{sendMessage(){this.$refs.child.receiveMessage('mes from parent');}}}</script>

子组件

<template><div><p>{{ message }}</p></div></template><script>data(){return {message:''}},methods:{receiveMessage(message){this.message = message;}}</script>

五、provide / inject

范围：父组件向子孙组件提供数据，可跨层级通信

父组件提供数据

<template><div><child-component></child-component></div></template><script>export default {provide: {message:'message from parent'}}</script>

子组件注入并使用数据

<template><div>{{ message }}</div></template><script>export default {inject:['message']}</script>