一、全局事件总线
范围：任意组件间
步骤：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
范围：父组件向子孙组件提供数据，可跨层级通信
父组件提供数据文章来源：https://www.toymoban.com/news/detail-838015.html
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
export default {
provide: {
message:'message from parent'
}
}
</script>
子组件注入并使用数据文章来源地址https://www.toymoban.com/news/detail-838015.html
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
inject:['message']
}
</script>
到了这里，关于vue组件之间通信方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
