Vue 组件通信方式总结【简单到不想总结呜呜】

为了看的方便，在最后把所有的代码贴出来了，可拉到页面底部查看；【只有前几种方式的，其他方式暂时没贴出来，因为图太多了...】

1. 父组件传值给子组件：在子组件中 props 中定义接收父组件值的变量名称，在父组件调用子组件的标签时，给子组件对应变量名称传入值即可。

父组件中：

 

子组件中：

 

2. 子组件给父组件传递消息：在子组件中调用 Vue 实例的 $emit，可接收多个命名参数，第一个是传递给父组件的方法名，除此之外可任意传入一些需要的参数。在父组件中使用 v-on 或者语法糖@接收子组件传来的事件，并指定调用哪个方法。

子组件：点击触发 sendToParent 方法，使用 $emit 向父组件传递 acceptChildInfo 事件，并把 info 参数一并传入父组件。

父组件：使用 @acceptChildInfo 接收子组件传来的事件，并调用 showChildInfo 方法，打印输出传到父组件的 Info 信息。

 打印输出：

 3. 任意组件传值：使用总线 $bus，先在 Vue.prototype 上定义一个所有实例共享的变量 $bus = new Vue()。之后可以通过 this.$bus.$emit 以及 this.$bus.$on 发送和接收数据.

main.js 中：

 子组件中：

 父组件中：

 

4. 父组件调用子组件里的方法：在父组件使用子组件处给子组件添加 ref="自定义命名"，之后在需要调用子组件方法处，使用 $refs.对应刚才的自定义命名.子组件中的方法名即可调用.

父组件：【可能只看这一个会不懂，因为我是按顺序一个个总结的，也就是说，后写的通信方式有些是利用了前面的通信方式写的一些方法】

 

 5. 子组件调用父组件方法：本质上是让一个接收到子组件传递过来信息的父组件方法去调用另一个子组件希望调用的父组件方法，也就是借助父组件一个方法去调用另一个父组件方法，其实就是上面介绍到的第二种通信方式再加上一些小变动，就不举例子了。

 6. 以上是最常见的几种通信方式，还有一些其他方式：

（1）$children、$parent：这个很容易理解吧，调用一个组件的 $children 就是获取它的子组件'们'，调用一个组件的 $parent 就是获取它的父组件。

（2）Vuex 状态管理进行通信

（3）localStorage、sessionStorage 本地存储：

 localStorage 和 sessionStorage 只能存储字符串，不能存储对象，因此存储对象需要使用 JSON.stringify() 将其转换为字符串，再使用 JSON.parse 还原.

转载一下：https://juejin.cn/post/7022054075411726366#heading-18，直接看这个就好。

（4）provide 和 inject：官方文档——https://cn.vuejs.org/v2/api/#provide-inject 

掘金博客：https://juejin.cn/post/6844903989935341581

在祖先组件 Vue 实例中进行 provide，在其任何一个子孙组件中都可以使用 inject 来接收，一般用在写组件库时，项目中并不常用。

一般可以将根组件自身传入 provide，使得所有子组件都可以访问到根组件的变量，实现类似于 Vuex 的全局状态管理，但缺点是无法像 Vuex 那样跟踪状态变化。因此官方不推荐使用，而推荐 Vuex.

（5）$attrs 和 $listeners：官方文档——https://cn.vuejs.org/v2/api/#vm-attrs 讲的很不清楚，建议搜一些博客看。

 　　假设有 A、B、C三个组件，依次为父组件、子组件、孙组件，现在希望A传给C一个属性，那么我们可以想到的方法有：1. A->B->C使用最普通的父子级信息传递 2. 公共总线bus传递 3. vuex 全局状态管理 4. provide、inject 5. 本地存储

　　现在介绍一种新的：我们在A组件中：

 　　B组件中使用v-bind="$attrs"：

 　　C组件中props接收A组件传过来的信息：

 　　现在再来看官方定义：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

　　也就是说，在我举的例子中：A组件 son 标签中传进去的属性值 year 和 number，如果在B组件没有 props 接收，那么在B组件 grand-son 标签中添加 v-bind="$attrs"，即可在C组件中props接收A传来的值。如果B组件的 props接收了A组件传来的值，那么C组件就接收不到了.