聚沙成塔·每天进步一点点
本文内容
⭐ 专栏简介
Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技术。订阅这个专栏，让我们一同踏上更深入的 Vue学习之旅！为你的前端技能树添砖加瓦！
在Vue中，实现非父子组件通信有多种方法，根据项目的需求和复杂性，开发者可以选择适合的方式。以下是一些常用的非父子组件通信方法：
1. 中央事件总线 (EventBus)
中央事件总线是一个空的 Vue 实例，用作组件之间的通信中心。组件通过触发和监听事件来实现通信。
发送事件的组件：
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
import { EventBus } from './EventBus.js';
export default {
methods: {
sendMessage() {
EventBus.$emit('custom-event', 'Hello from sender!');
},
},
};
</script>
接收事件的组件：
<template>
<div>
<p>{{ receivedMessage }}</p>
</div>
</template>
<script>
import { EventBus } from './EventBus.js';
export default {
data() {
return {
receivedMessage: '',
};
},
created() {
EventBus.$on('custom-event', (message) => {
this.receivedMessage = message;
});
},
};
</script>
2. Vuex 状态管理
Vuex 是 Vue.js 应用程序开发的状态管理模式。它集中管理应用的状态，并提供了一种可预测的方式修改状态。
配置 Vuex：
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
message: '',
},
mutations: {
setMessage(state, message) {
state.message = message;
},
},
});
使用 Vuex 的组件：
<template>
<div>
<button @click="sendMessage">Send Message</button>
<p>{{ $store.state.message }}</p>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$store.commit('setMessage', 'Hello from sender!');
},
},
};
</script>
3. Provide / Inject
provide 和 inject 是 Vue 提供的一种高级选项，可以在祖先组件中使用 provide 提供数据，而在后代组件中使用 inject 来注入这些数据。
祖先组件：
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
export default {
provide() {
return {
message: 'Hello from provider!',
};
},
};
</script>
后代组件：
<template>
<div>
<p>{{ injectedMessage }}</p>
</div>
</template>
<script>
export default {
inject: ['message'],
computed: {
injectedMessage() {
return this.message;
},
},
};
</script>
4. $attrs 和 $listeners
每个组件实例都有 $attrs 和 $listeners 属性，可以用于在父组件中访问子组件的属性和监听事件。
<!-- 子组件 -->
<template>
<div>
<!-- 子组件的模板 -->
</div>
</template>
<script>
export default {
mounted() {
this.$emit('custom-event', 'Hello from child!');
},
};
</script>
<!-- 父组件 -->
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
export default {
methods: {
handleCustomEvent(message) {
console.log(message);
},
},
};
</script>
5. 第三方状态管理库
除了 Vuex 外，还可以使用其他的第三方状态管理库，例如 Redux 或 MobX。这些库提供了更多高级的状态管理和通信机制，适用于大型应用。
这些是一些用于非父子组件通信的常见方法。根据项目的具体情况，可以选择最合适的方式，以实现灵活而高效的组件通信。
⭐ 写在最后
欢迎来到《Vue技能树专栏》！本专栏旨在帮助您全面深入地掌握Vue.js，一款现代、灵活且强大的JavaScript框架。无论您是初学者还是有一定经验的开发者，这里都将为您提供详细的指导、实用的技巧以及深入的理解，助您在Vue.js世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，