使用vuex进行兄弟组件通信

1. 核心想法

使用vuex进行兄弟组件通信的核心思路就是将vuex作为一个store(vuex被设计的原因之一)，将每个子组件的数据都存放进去，每个子组件都从vuex里获取数据，其实就是一句话——把vuex作为一个桥

2. 具体代码

父组件App.vue

<template>
  <div id="app">
    <ChildA/>
    <ChildB/>
  </div></template><script>
  import ChildA from './components/ChildA' // 导入A组件
  import ChildB from './components/ChildB' // 导入B组件

  export default {    name: 'App',    components: {ChildA, ChildB} // 注册A、B组件
  }</script><style>
  #app {    font-family: 'Avenir', Helvetica, Arial, sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    text-align: center;    color: #2c3e50;    margin-top: 60px;
  }  div {    margin: 10px;
  }</style>

子组件ChildA

<template>
  <div id="childA">
    <h1>我是A组件</h1>
    <button @click="transform">点我让B组件接收到数据</button>
    <p>因为你点了B，所以我的信息发生了变化：{{BMessage}}</p>
  </div></template><script>
  export default {
    data() {      return {        AMessage: 'Hello，B组件，我是A组件'
      }
    },    computed: {
      BMessage() {        // 这里存储从store里获取的B组件的数据
        return this.$store.state.BMsg
      }
    },    methods: {
      transform() {        // 触发receiveAMsg，将A组件的数据存放到store里去
        this.$store.commit('receiveAMsg', {          AMsg: this.AMessage
        })
      }
    }
  }</script><style>
  div#childA {    border: 1px solid black;
  }</style>

子组件ChildB

<template>
  <div id="childB">
    <h1>我是B组件</h1>
    <button @click="transform">点我让A组件接收到数据</button>
    <p>因为你点了A，所以我的信息发生了变化：{{AMessage}}</p>
  </div></template><script>
  export default {
    data() {      return {        BMessage: 'Hello，A组件，我是B组件'
      }
    },    computed: {
      AMessage() {        // 这里存储从store里获取的A组件的数据
        return this.$store.state.AMsg
      }
    },    methods: {
      transform() {        // 触发receiveBMsg，将B组件的数据存放到store里去
        this.$store.commit('receiveBMsg', {          BMsg: this.BMessage
        })
      }
    }
  }</script><style>
  div#childB {    border: 1px solid green;
  }</style>

vuex模块store.js

                 

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

Vue.use(Vuex)

const state = {
  // 初始化A和B组件的数据，等待获取
  AMsg: '',
  BMsg: ''
}

const mutations = {
  receiveAMsg(state, payload) {
    // 将A组件的数据存放于state
    state.AMsg = payload.AMsg
  },
  receiveBMsg(state, payload) {
    // 将B组件的数据存放于state
    state.BMsg = payload.BMsg
  }
}

export default new Vuex.Store({
  state,
  mutations
})

作者：bluesboneW                        
来源：https://segmentfault.com/a/1190000014838912?utm_source=channel-hottest