vue两个组件既不是父子组件也不是兄弟组件应该怎么进行通信？

Question

我想点击B组件添加的时候能够把数据添加到A组件里面
A组件

<template>
   <div>
     <ul>
       <li v-for="(item, index) in list" :key=index>{{item}}</li>
     </ul>
     <router-link to="/b">B</router-link>
   </div>
</template>

<script>
export default {
  name: 'A',
  data () {
    return {
      list: ['a', 'b', 'c']
    }
  }
}
</script>

<style scoped>
</style>

B组件

<template>
  <div>
    <input type="text" v-model="msg">
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: 'B',
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    add () {
    }
  }
}
</script>

<style scoped>
</style>

Answer 1

A组件
监听根组件$root的指定消息componentsMessage，这个componentsMessage可以自定义，只要监听/分发的消息字符串是一样的就能收到

data() {
  return {
    list: ['a', 'b', 'c']
  }
},
created() {
  this.$root.$on('componentsMessage', v => {
    this.list.push(v)
  })
},

B组件
可在任意组件通过根实例$root来分发消息，只要有在监听都能收到

methods: {
  add() {
    this.$root.$emit('componentsMessage', 'd')
  },

Answer 2

Bus机制或者Vuex

Answer 3

可以考虑使用vuex