vue非父子组件

Vue是一款流行的JavaScript框架，它非常适合构建大型的单页应用程序。Vue中的组件是应用的构建块，这些组件可以是父子关系或其他类型的组合。非父子组件是指在Vue中不直接嵌套在其他组件中的组件。这些组件之间的通信方式不同于Vue中父组件向子组件传递数据，也不同于子组件向父组件发出事件通知。在本文中，我们将探讨Vue中非父子组件通信的方式。

Vue提供了两种方法实现非父子组件之间的通信：event bus和Vuex。Event bus是一个新的Vue实例，它充当消息传递的中介。当非父子组件需要相互通信时，它们可以通过向event bus中发布和订阅事件来实现通信。这种方式非常简单，但与Vuex相比，功能有限。

// event bus实现非父子组件通信
// 创建一个event bus实例
var bus = new Vue()
// 组件A发布一个事件，传递一个参数
bus.$emit('event-name','event-data')
// 组件B订阅事件，接收发布的参数
bus.$on('event-name',function(data){
  // do something with data
})

Vuex是Vue的官方状态管理库，它提供了一种集中式管理应用程序组件状态的方式。在Vuex中，应用程序的所有组件共享同一个状态树。这使得组件之间的数据传递和共享变得容易。Vuex中包含了actions、mutations、getters等概念，可以帮助开发人员更加清晰地管理应用程序的状态。相对于event bus，Vuex具有更多的功能，并且更加适合大型应用程序的管理。

// Vuex实现非父子组件通信
// 在store.js文件中定义Vuex store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: ''
  },mutations: {
    setMessage(state,message) {
      state.message = message
    }
  },actions: {
    setMessage(context,message) {
      context.commit('setMessage',message)
    }
  }
})

export default store

// 在组件A中修改message的值
this.$store.dispatch('setMessage','Hello World')

// 在组件B中读取message的值
computed: {
  message() {
    return this.$store.state.message
  }
}

总的来说，Vue中非父子组件通信的实现方式有很多。除了event bus和Vuex外，还可以使用props、$parent、$root等属性和方法来实现非父子组件之间的数据传递和通信。开发人员可以根据应用程序的复杂程度和具体需求选择最合适的方式来实现通信。