vue组件之间通信方式

vue组件之间通信方式

一、全局事件总线

范围 :任意组件间
步骤 :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>
相关推荐
打不着的大喇叭28 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code33 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟36 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了1 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
susnm1 小时前
Dioxus 与数据库协作
前端·rust