第二十三章 Vue组件通信之非父子组件通信

目次

一、弁言
1.1. event bus 变乱总线
1.1.1. 实现步骤
1.2. provide & inject
1.2.1. 实现步骤 
二、event bus变乱总线完整代码
2.1. 工程结构图 
​2.2. main.js
2.3. App.vue
2.4. EventBus.js
2.5. BaseC.vue
2.6. BaseB.vue
2.7. BaseA.vue
三、provide & inject
3.1. 工程结构图
3.2. main.js
3.3. App.vue
3.4. GrandSon.vue
3.5. SonA.vue
3.6. SonB.vue

---

一、弁言

前面几个章节我们重点讲授了在Vue中组件的关系类别及父子组件的通信解决方案，本章内容将详细讲授关于非父子组件间的通信解决方案。那么非父子组件的通信我们分为两种：
1.1. event bus 变乱总线

作用：非父子组件之间，进行简易消息通报。(复杂场景 → Vuex)

1.1.1. 实现步骤

1. 创建一个都能访问到的变乱总线 (空 Vue 实例) → 在utils包下创建EventBus.js

2. A 组件(汲取方)，监听 Bus 实例的变乱

3. B 组件(发送方)，触发 Bus 实例的变乱

1.2. provide & inject

   作用：跨层级共享数据
  注：在利用跨层级进行父组件和子孙组件进行共享数据时，能够进行简单数据类型（非相应式）及复杂数据类型（相应式）的共享，但是实际利用过程中，我们建议利用复杂类型来做数据共享，由于该类型的数据是相应式的，因此其他组件在获取利用时能够直接见效。
  

  1.2.1. 实现步骤 

1. 父组件 provide 提供数据

   2. 子/孙组件 inject 取值利用
  

  二、event bus变乱总线完整代码

2.1. 工程结构图 

2.2. main.js

1. import Vue from 'vue'
2. import App from './App.vue'
4. Vue.config.productionTip = false
6. new Vue({
7.   render: h => h(App),
8. }).$mount('#app')

复制代码

2.3. App.vue

1. <template>
2.   <div class="app">
3.     <BaseA></BaseA>
4.     <BaseB></BaseB>
5.     <BaseC></BaseC>
6.   </div>
7. </template>
9. <script>
10. import BaseA from './components/BaseA.vue'
11. import BaseB from './components/BaseB.vue'
12. import BaseC from './components/BaseC.vue'
13. export default {
14.   components:{
15.     BaseA,
16.     BaseB,
17.     BaseC
18.   }
19. }
20. </script>
22. <style>
24. </style>

复制代码

2.4. EventBus.js

1. import Vue from 'vue'
3. const Bus  =  new Vue()
5. export default Bus

复制代码

2.5. BaseC.vue

1. <template>
2.   <div class="base-c">
3.     我是C组件（接受方）
4.     <p>{{msg}}</p>  
5.   </div>
6. </template>
8. <script>
9. import Bus from '../utils/EventBus'
10. export default {
11.   data() {
12.     return {
13.       msg: '',
14.     }
15.   },
16.   created() {
17.     Bus.$on('sendMsg', (msg) => {
18.       // console.log(msg)
19.       this.msg = msg
20.     })
21.   },
22. }
23. </script>
25. <style scoped>
26. .base-c {
27.   width: 200px;
28.   height: 200px;
29.   border: 3px solid #000;
30.   border-radius: 3px;
31.   margin: 10px;
32. }
33. </style>

复制代码

2.6. BaseB.vue

1. <template>
2.   <div class="base-b">
3.     <div>我是B组件（发布方）</div>
4.     <button @click="sendMsgFn">发送消息</button>
5.   </div>
6. </template>
8. <script>
9. import Bus from '../utils/EventBus'
10. export default {
11.   methods: {
12.     sendMsgFn() {
13.       Bus.$emit('sendMsg', '今天天气不错，适合旅游')
14.     },
15.   },
16. }
17. </script>
19. <style scoped>
20. .base-b {
21.   width: 200px;
22.   height: 200px;
23.   border: 3px solid #000;
24.   border-radius: 3px;
25.   margin: 10px;
26. }
27. </style>

复制代码

2.7. BaseA.vue

1. <template>
2.   <div class="base-a">
3.     我是A组件（接受方）
4.     <p>{{msg}}</p>  
5.   </div>
6. </template>
8. <script>
9. import Bus from '../utils/EventBus'
10. export default {
11.   data() {
12.     return {
13.       msg: '',
14.     }
15.   },
16.   created() {
17.     Bus.$on('sendMsg', (msg) => {
18.       // console.log(msg)
19.       this.msg = msg
20.     })
21.   },
22. }
23. </script>
25. <style scoped>
26. .base-a {
27.   width: 200px;
28.   height: 200px;
29.   border: 3px solid #000;
30.   border-radius: 3px;
31.   margin: 10px;
32. }
33. </style>

复制代码

三、provide & inject

   3.1. 工程结构图

  

  3.2. main.js

1. import Vue from 'vue'
2. import App from './App.vue'
4. Vue.config.productionTip = false
6. new Vue({
7.   render: h => h(App),
8. }).$mount('#app')

复制代码

3.3. App.vue

1. <template>
2.   <div class="app">
3.     我是APP组件
4.     <button @click="change">修改数据</button>
5.     <SonA></SonA>
6.     <SonB></SonB>
7.   </div>
8. </template>
10. <script>
11. import SonA from './components/SonA.vue'
12. import SonB from './components/SonB.vue'
13. export default {
14.   provide() {
15.     return {
16.       // 简单类型 是非响应式的
17.       color: this.color,
18.       // 复杂类型 是响应式的
19.       userInfo: this.userInfo,
20.     }
21.   },
22.   data() {
23.     return {
24.       color: 'pink',
25.       userInfo: {
26.         name: 'zs',
27.         age: 18,
28.       },
29.     }
30.   },
31.   methods: {
32.     change() {
33.       this.color = 'red'
34.       this.userInfo.name = 'ls'
35.     },
36.   },
37.   components: {
38.     SonA,
39.     SonB,
40.   },
41. }
42. </script>
44. <style>
45. .app {
46.   border: 3px solid #000;
47.   border-radius: 6px;
48.   margin: 10px;
49. }
50. </style>

复制代码

3.4. GrandSon.vue

1. <template>
2.   <div class="grandSon">
3.     我是GrandSon
4.     {{ color }} -{{ userInfo.name }} -{{ userInfo.age }}
5.   </div>
6. </template>
8. <script>
9. export default {
10.   inject: ['color', 'userInfo'],
11. }
12. </script>
14. <style>
15. .grandSon {
16.   border: 3px solid #000;
17.   border-radius: 6px;
18.   margin: 10px;
19.   height: 100px;
20. }
21. </style>

复制代码

3.5. SonA.vue

1. <template>
2.   <div class="SonA">我是SonA组件
3.     <GrandSon></GrandSon>
4.   </div>
5. </template>
7. <script>
8. import GrandSon from '../components/GrandSon.vue'
9. export default {
10.   components:{
11.     GrandSon
12.   }
13. }
14. </script>
16. <style>
17. .SonA {
18.   border: 3px solid #000;
19.   border-radius: 6px;
20.   margin: 10px;
21.   height: 200px;
22. }
23. </style>

复制代码

3.6. SonB.vue

1. <template>
2.   <div class="SonB">
3.     我是SonB组件
4.   </div>
5. </template>
7. <script>
8. export default {
10. }
11. </script>
13. <style>
14. .SonB {
15.   border: 3px solid #000;
16.   border-radius: 6px;
17.   margin: 10px;
18.   height: 200px;
19. }
20. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。