vue组件间的通讯（10种方法）【重要】（待补充。。。）

1.props/$emit

props主要用于父组件传递数据给子组件，父==>子。

Vue自定义事件

父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件 。即父组件中使用 v-on绑定自定义事件，然后在子组件中使用​​ $emit(eventName,data)​​​触发事件
仅仅用于父子组件传递，不适用于 三层及其以上

2.消息订阅与发布(PubSubJS库)

3.插槽slot

用于父组件向子组件传递"标签数据"。也即子组件先有一个"占位符", 等待父组件传入具体的标签，子组件在进行渲染。
因为传递的具体的标签是在父组件，所以操作也应该放在父组件中。也就是说应该在父组件运行好之后传入子组件，其所有的操作应该在父组件中进行。

4.vuex状态管理

Vuex 核心

State：保存所有组件的共享状态
Getters：类似状态值的计算属性
Mutations：修改 State 中状态值的唯一方法，里面包含状态变化监听器和记录器
Actions：用于异步处理 State 中状态值，异步函数结束后调用Mutations
Modules：当一个 State 对象比较庞大时，可以将 State 分割成多个 Modules 模块。

5.全局事件总线

6. $parent / $children与 ref

ref / $refs

这种方式也是实现父子组件之间的通信
ref：这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例来访问组件的数据和方法

$parent / $children

使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。
使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。

7. 依赖注入（provide / inject）

这种方式就是vue中依赖注入，该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。
provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。
provide 钩子用来发送数据或方法。
inject钩子用来接收数据或方法

8. $attrs / $listeners

$attrs / $listeners 都是 vue 实例的 property。使用 $attrs / $listeners，实现父组件传递数据给子/孙组件。

$attrs：

包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=“$attrs” 传入内部组件。通常配合 interitAttrs 选项一起使用。

$listeners：

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=“$listeners” 传入内部组件。

9.LocalStorage/SessionStorage

localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage：数据在当前浏览器窗口关闭后自动删除

10.v-model语法糖（双向数据绑定）

父传子：

父组件：

在子组件里写v-model=“message”

子组件：

props:{
value:类型,
},
在data里调用这个value

子传父：

子组件：

函数绑定里写this.$emit(‘输入框，如input’,this.mymessage);

父组件：

v-model=“mymessage”

优点：使用时更加简洁
缺点：代码阅读难懂

总结

组件通信的几种方式

1、父子组件通信

2、兄弟组件通信

3、跨多层级组件通信

4、任意组件（vuex）

一、父与子孙通讯

1. props/emit；——父组件通过​​props​​​传递数据给子组件，子组件通过​​$emit​​发送事件传递数据给父组件（单向数据流）
2. 插槽slot；
3. ​​$parent / $children​​​与 ​​ref​​​——​​$parent / $children​​​访问组件实例中的方法和数据； ​​$ref​​​放在组件上可以获取组件实例。通过 ref 属性给子组件设置一个名字。父组件通过​​$refs​​​组件名来获得子组件，子组件通过 ​​$parent ​​获得父组件，这样也可以实现通信
4. ​​v-model​​——语法糖（双向数据绑定）

二、跨越层级通信

4. ​​provide / inject​​​——使用​​ provide/inject​​​，在父组件中通过 ​​provide​​​提供变量，在子组件中通过​​inject​​​来将变量注入到组件中。不论子组件有多深，只要调用了 ​​inject ​​​那么就可以注入 ​​provide​​中的数据【无响应性且只能单向通信（父传子）】
5. ​​ $attrs / $listeners​​——具有响应性且可以双向通信

三、任意组件通讯

6. 消息订阅与发布​​pubsub​​库
7. ​​vuex​​​状态管理——​​vuex​​ 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的
8. 全局事件总线​​bus​​​——利用​​eventBus​​​总线实现，（实际上就是新建一个​​vue​​​实例，用​​eventBus.$emit​​​替代​​this.$emit​​​，一样用​​v-on​​监听事件变化）【使用 eventBus 的方法，它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。】
9. LocalStorage/SessionStorage本地存储

参考

1. ​​https://www.bilibili.com/video/BV1Zy4y1K7SH?p=96&spm_id_from=pageDriver​​