面试官：说说Vue组件间通信方式有哪些

记得面试的时候，被问到这个，当时只是简单粗暴的回答了

现在趁着假期，整理一下和这个知识点有关的笔记

1) 通信种类

1. 父组件向子组件通信
2. 子组件向父组件通信
3. 隔代组件间通信
4. 兄弟组件间通信

2) 实现通信方式

1. props
2. vue自定义事件
3. 消息订阅与发布
4. vuex
5. slot

3) 方式1: props

1. 通过一般属性实现父向子通信
2. 通过函数属性实现子向父通信
3. 缺点: 隔代组件和兄弟组件间通信比较麻烦

4) 方式2: vue自定义事件

1. vue内置实现, 可以代替函数类型的props
   a. 绑定监听: <MyComp @eventName=“callback”
   b. 触发(分发)事件: this.$emit(“eventName”, data)
2. 缺点: 只适合于子向父通信

5) 方式3: 消息订阅与发布

1. 需要引入消息订阅与发布的实现库, 如: pubsub-js
   a. 订阅消息: PubSub.subscribe(‘msg’, (msg, data)=>{})
   b. 发布消息: PubSub.publish(‘msg’, data)
2. 优点: 此方式可用于任意关系组件间通信

6) 方式4: vuex

1. 是什么: vuex是vue官方提供的集中式管理vue多组件共享状态数据的vue插件
2. 优点: 对组件间关系没有限制, 且相比于pubsub库管理更集中, 更方便

7) 方式5: slot

1. 是什么: 专门用来实现父向子传递带数据的标签
   a. 子组件
   b. 父组件
2. 注意: 通信的标签模板是在父组件中解析好后再传递给子组件的