面试题：Vue中事件总线与Provide/Inject在组件通信场景下的适用范围对比

Question

在Vue组件化开发中，简单阐述事件总线和Provide/Inject分别适用于哪些组件通信场景，并举例说明。

Answer 1

事件总线（Event Bus）

1. 适用场景：适用于非父子关系且层级较浅的组件之间的通信。比如兄弟组件、隔代组件之间较为简单的通信场景。
2. 举例：
   • 首先创建一个事件总线实例，通常在 main.js 中：

import Vue from 'vue'
// 创建事件总线
export const eventBus = new Vue()

• 假设我们有两个兄弟组件 ComponentA 和 ComponentB。在 ComponentA 中触发事件：

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import { eventBus } from '@/main'
export default {
  methods: {
    sendMessage() {
      eventBus.$emit('custom - event', '这是来自ComponentA的消息')
    }
  }
}
</script>

• 在 ComponentB 中监听事件：

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

<script>
import { eventBus } from '@/main'
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    eventBus.$on('custom - event', (msg) => {
      this.message = msg
    })
  }
}
</script>

Provide/Inject

1. 适用场景：适用于祖孙组件之间的通信，尤其是当组件层级较深，并且父组件需要向其所有子孙组件传递数据时，使用 Provide/Inject 会更加方便，不需要在中间层级的组件中逐个传递数据。
2. 举例：
   • 假设我们有一个父组件 ParentComponent，一个中间组件 MiddleComponent 和一个子组件 ChildComponent。
   • 在 ParentComponent 中通过 provide 提供数据：

<template>
  <div>
    <MiddleComponent></MiddleComponent>
  </div>
</template>

<script>
import MiddleComponent from './MiddleComponent.vue'
export default {
  components: {
    MiddleComponent
  },
  provide() {
    return {
      sharedData: '这是来自ParentComponent的数据'
    }
  }
}
</script>

• 在 ChildComponent 中通过 inject 注入数据，MiddleComponent 无需处理该数据，数据可直接从 ParentComponent 传递到 ChildComponent：

<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedData']
}
</script>