1. 引言
在Vue中，组件化编程已成为主流。我们常常会遇到需要在非父子组件之间通信的情况，例如来自父组件的事件需要通知另一个不是它直接子组件的组件。Vue为此提供了多种方式来解决这个问题。在本文中，我们将深入探讨这些方式。
2. 使用事件总线实现非父子组件通信
事件总线是Vue中非常实用的一个工具，它可以让任何组件之间进行通信，而不需要担心它们之间的层级关系。
2.1 创建事件总线
在主Vue实例上创建一个新的Vue实例来充当事件总线：
const bus = new Vue()
我们可以将这个实例保存在一个全局变量中，以便我们在任何组件中都可以访问它。
2.2 在组件上监听事件
我们可以使用$on方法在组件上监听一个事件：
bus.$on('my-event', function (data) {
console.log(data)
})
在这个例子中，我们监听了一个叫做my-event的事件，并在事件被触发时打印出传递的数据。
2.3 触发事件
我们可以使用$emit方法在组件上触发一个事件：
bus.$emit('my-event', { someData: 123 })
在这个例子中，我们触发了一个叫做my-event的事件，并传递了一个包含数据的对象。
2.4 在其他组件中监听事件
我们可以在其他组件中使用$on方法来监听同一个事件：
bus.$on('my-event', function (data) {
console.log(data.someData)
})
在这个例子中，我们在另一个组件中监听了my-event事件，并打印出传递的数据中的someData属性。
2.5 示例
下面是示例代码：
// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
// ComponentA.vue
import { EventBus } from './EventBus.js'
export default {
name: 'ComponentA',
methods: {
handleClick() {
EventBus.$emit('button-clicked', 123)
},
},
}
// ComponentB.vue
import { EventBus } from './EventBus.js'
export default {
name: 'ComponentB',
data() {
return {
count: 0,
}
},
mounted() {
EventBus.$on('button-clicked', data => {
this.count = data
})
},
}
在这个示例中，ComponentA组件触发了一个事件，ComponentB组件监听该事件，并更新自己的状态。
3. 使用Vuex实现非父子组件通信
Vuex是状态管理模式，在Vue应用程序中管理数据的必备工具。它为所有组件提供了一个集中式的状态存储库，将状态从组件树中提取出来，以得到更好的可维护性。
3.1 创建Vuex Store
在Vuex库中，我们需要创建一个store，来存储整个应用程序的状态。我们可以将Store实例保存在一个全局变量中，以便我们在任何组件中都可以访问它。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state, amount) {
state.count += amount
},
},
})
在这个示例中，我们在vuex中定义了一个state和mutations的实例，状态包含了应用程序中所有组件的状态。
3.2 在组件中更新状态
我们可以使用$store.commit方法在组件上触发一个mutation（即改变state的方法）：
methods: {
incrementCount() {
this.$store.commit('increment', 5)
},
}
在这个例子中，我们在组件中触发了一个叫做increment的mutation，并传递了一个值5。
3.3 在其他组件中访问状态
我们可以在其他组件中使用$store.state来访问状态：
computed: {
count() {
return this.$store.state.count
},
},
在这个例子中，我们在另一个组件中读取了state中的count属性，并将它绑定到本地计算属性中。
3.4 示例
下面是示例代码：
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state, amount) {
state.count += amount
},
},
})
// ComponentA.vue
import { store } from './store.js'
export default {
name: 'ComponentA',
methods: {
incrementCount() {
store.commit('increment', 5)
},
},
}
// ComponentB.vue
import { store } from './store.js'
export default {
name: 'ComponentB',
computed: {
count() {
return store.state.count
},
},
}
在这个示例中，ComponentA组件使用store.commit触发了一个mutation，ComponentB组件则使用了store.state来访问状态。
4. 使用事件总线和Vuex结合实现非父子组件通信
事件总线和Vuex可以一起使用，使你在编写组件时拥有更多的灵活性。我们可以使用事件总线来触发一个Vuex的mutation或者action。
4.1 触发Vuex Mutations
我们可以在事件总线上触发一个事件，然后监听该事件的所有组件都可以通过该事件触发Vuex mutations。
// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import { EventBus } from './EventBus.js'
Vue.use(Vuex)
export const store = new Vuex.Store({
// ...
mutations: {
increment(state, amount) {
state.count += amount
},
},
})
// MyComponent.vue
import { EventBus } from './EventBus.js'
export default {
name: 'MyComponent',
methods: {
incrementCount() {
EventBus.$emit('increment-count', 5)
},
},
}
// AnotherComponent.vue
import { store } from './store.js'
import { EventBus } from './EventBus.js'
export default {
name: 'AnotherComponent',
created() {
EventBus.$on('increment-count', amount => {
store.commit('increment', amount)
})
},
}
在这个示例中，MyComponent组件触发了一个事件，AnotherComponent组件监听该事件，并触发了一个mutation来改变state。
4.2 触发Vuex Actions
我们也可以在事件总线上触发一个事件，然后监听该事件的所有组件都可以通过该事件触发Vuex actions。
// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import { EventBus } from './EventBus.js'
Vue.use(Vuex)
export const store = new Vuex.Store({
// ...
actions: {
incrementAsync(context, amount) {
setTimeout(() => {
context.commit('increment', amount)
}, 1000)
},
},
})
// MyComponent.vue
import { EventBus } from './EventBus.js'
export default {
name: 'MyComponent',
methods: {
incrementCount() {
EventBus.$emit('increment-count', 5)
},
},
}
// AnotherComponent.vue
import { store } from './store.js'
import { EventBus } from './EventBus.js'
export default {
name: 'AnotherComponent',
created() {
EventBus.$on('increment-count', amount => {
store.dispatch('incrementAsync', amount)
})
},
}
在这个示例中，MyComponent组件触发了一个事件，AnotherComponent组件监听该事件，并触发了一个action来改变state。
5. 总结
在Vue中，我们有多种方式来实现非父子组件之间的通讯，包括事件总线、Vuex和事件总线与Vuex的组合。选择哪种方式将取决于应用程序的具体需求。使用正确的方式可以帮助我们更轻松地处理应用程序中的组件通信问题。