面试题：Vue组件化开发中如何实现组件间通信

Question

在Vue组件化开发构建UI组件库的场景下，说说父子组件、兄弟组件以及非直接关系组件之间分别常用的通信方式，并简单描述每种方式的实现思路。

Answer 1

父子组件通信

1. props 和 $emit
   • 实现思路：父组件通过 props 向子组件传递数据，子组件通过 $emit 触发自定义事件向父组件传递数据。父组件在模板中给子组件标签绑定数据作为 props，子组件在 props 选项中声明接收。子组件通过 this.$emit('事件名', 数据) 触发事件，父组件在子组件标签上监听该事件并处理。

兄弟组件通信

1. 事件总线（event bus）
   • 实现思路：创建一个空的 Vue 实例作为事件总线。在兄弟组件中，一个组件通过 bus.$emit('事件名', 数据) 触发事件，另一个组件通过 bus.$on('事件名', function(数据) { /* 处理逻辑 */ }) 监听事件并接收数据。
2. Vuex
   • 实现思路：将共享数据存储在 Vuex 的状态（state）中。兄弟组件通过 mapState 辅助函数获取状态数据。当一个组件需要修改共享数据时，通过提交 mutation 来修改 state，所有依赖该 state 的组件会自动更新。

非直接关系组件通信

1. Vuex
   • 实现思路：同兄弟组件通信使用 Vuex 的方式，将共享数据存储在 Vuex 的 state 中，通过 mutation 进行数据修改，组件通过 mapState 获取数据。
2. provide 和 inject
   • 实现思路：祖先组件通过 provide 选项提供数据，后代组件通过 inject 选项注入数据。provide 可以是一个对象或返回对象的函数，后代组件通过 inject 声明要注入的数据名即可使用。