vue非父子组件通信

发表于 | 分类于

之前我们已经对父子组件之间的通信有了一定的理解 #22 ,那么对于非父子组件之间的通信该如何实现呢？

Event Bus

首先, 新建一个 bus.js, 使用一个空的 Vue 实例作为事件总线

1
2
import Vue from 'vue'
export default new Vue()

再新建两个组件：

a 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div class="aa">
	{{msg}}
	<button @click="toBus">子组件传给兄弟组件</button>
  </div>
</template>

<script>
import Bus from "../bus";// 引入bus.js
export default {
  name: "aa",
  data() {
    return {
      msg: "this is aa component"
    };
  },
  methods: {
    toBus() {
      Bus.$emit("on", "data from aa component");// 发送 `on` 事件
    }
  }
};
</script>

<style scoped>
</style>

b 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div class="bb">
      {{msg}}
  </div>
</template>

<script>
import Bus from "../bus";// 引入bus.js
export default {
  name: "bb",
  data() {
    return {
      msg: "this is bb component"
    };
  },
  mounted() {
    Bus.$on("on", msg => { // 监听 `on` 事件
      this.msg = msg;
    });
  }
};
</script>

<style scoped>
</style>

最后将 a , b 组件展示出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="hello">
    <A></A>
    <B></B>
  </div>
</template>

<script>
import A from './a.vue'
import B from './b.vue'
export default {
  name: 'HelloWorld',
  components:{
    A,
    B
  }
}
</script>

<style scoped>
</style>

此时点击 a 组件中的按钮，就会发现 b 中的 msg 变成了 data from aa component

vuex

在复杂情况下, 就应该考虑使用 vuex 来管理状态了