vue组件之间通信方式

- - 一、全局事件总线
  - [二、props和 $emit](#二、props和$ emit)
  - 三、Vuex（状态管理）
  - [四、 $refs](#四、$ refs)
  - [五、provide / inject](#五、provide / inject)

一、全局事件总线

范围：任意组件间
步骤：1、创建事件总线

第一种方式：通过自定义事件总线方式

javascript 复制代码

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

局部引用

javascript 复制代码

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

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

main.js

javascript 复制代码

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

局部引用

javascript 复制代码

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

解绑事件

javascript 复制代码

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

二、props和$emit

范围：父子组件间

父组件

javascript 复制代码

<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>

子组件

javascript 复制代码

<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

javascript 复制代码

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

javascript 复制代码

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

四、$refs

范围：父组件访问子组件

父组件

javascript 复制代码

<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>

子组件

javascript 复制代码

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

五、provide / inject

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

父组件提供数据

javascript 复制代码

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

子组件注入并使用数据

javascript 复制代码

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