Vue非父子组件之间的通信方式详解

在Vue中，父子组件之间的数据传递和通信比较容易实现，但是在非父子组件之间的通信则需要通过一些特殊的方式来实现。本文将详细介绍Vue非父子组件之间的通信方式。

1. 公共事件总线

公共事件总线是一种非常简单和常用的非父子组件通信方式，它利用Vue实例作为一个中央事件总线来进行通信。具体实现步骤如下：

1. 实例化一个Vue实例并作为事件总线：

var eventBus = new Vue()

1. 在发出事件的组件中，使用eventBus.$emit方法触发事件并传递数据：

eventBus.$emit('eventName', data)

1. 在接收事件的组件中，使用eventBus.$on方法监听事件并处理数据：

eventBus.$on('eventName', function(data){  
  console.log(data)
})

下面是一个示例，假设我们有两个组件A和B，A组件想要向B组件传递一个消息：

<template>
  <div>
    <button @click="emitMessage">向B组件发送消息</button>
  </div>
</template>

<script>
  export default {
    methods: {
      emitMessage () {
        eventBus.$emit('message', 'Hello B!')
      }
    }
  }
</script>

在B组件中，监听message事件并接收数据：

<template>
  <div>{{message}}</div>
</template>

<script>
  export default {
    data () {
      return {
        message: ''
      }
    },
    mounted () {
      eventBus.$on('message', (data) => {
        this.message = data
      })
    }
  }
</script>

2. 状态管理模式

Vue中的状态管理模式是一种适用于大型应用程序的非父子组件通信方式。Vue提供了Vuex库来实现这种模式。Vuex将应用程序中所有组件的状态存储在一个单一的集中式存储库中，并将组件中的所有状态更改都通过调度操作提交到该存储库中，从而使应用程序的状态维护更容易。

下面是一个使用Vuex的示例。假设我们有两个组件A和B，A组件想要向B组件传递一个消息：

1. 安装Vuex并创建一个存储库：

npm install vuex --save

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

1. 在A组件中用$store.dispatch方法触发事件并提交更改：

<template>
  <div>
    <button @click="setMessage">向B组件发送消息</button>
  </div>
</template>

<script>
  export default {
    methods: {
      setMessage () {
        this.$store.commit('setMessage', 'Hello B!')
      }
    }
  }
</script>

1. 在B组件中使用$store.state属性来访问状态：

<template>
  <div>{{message}}</div>
</template>

<script>
  export default {
    computed: {
      message () {
        return this.$store.state.message
      }
    }
  }
</script>

结论

本文介绍了Vue非父子组件之间的通信方式，包括公共事件总线和状态管理模式。为了更好地维护和扩展应用程序，我们应该根据具体应用场景选择适当的通信方式。