隔代通信

在之前的文章中我们提到了vue常用的几种通信方式，如父子，子父，以及兄弟组件之间的通信，可以通过这个传送门了解他们：Vue通信方式（一）

当我们如果遇到祖组件，父组件，孙组件，三个级别嵌套时，我们该怎么在祖组件与孙组件之间通信呢，当然通过本地存储或者Vuex都可以实现，但仅仅是一个值得时候未免有点小题大做了，或者是组件之间的通信那样一级一级传？有点麻烦，在此，我们就详解如何实现祖孙之间的通信。

首先我们来看看vue新增的两个属性：listeners，这是vue2.4新增的两个属性，我们来看看官方文档是怎么解释的吧。

image

好吧，对于第一次看的童鞋来说，并不知道他在BB什么， 简要的讲就是，listeners相当于父作用域的事件监听器，那我们就可以用这两个属性实现祖孙之间的数据通信

首先，我们定义一个祖级别的组件：father1.vue

然后在定义一个父级别的组件：son.vue,相当于祖孙通信之间的中间件

主要是绑定两个属性v-bind="listeners"，并且不能在props中声明传入的值，"listeners用于监听触发事件传值给father.vue.

最后我们定义一个孙级别的组件：c.vue

注意：此组件中props也不能声明父组件传入的值，否则$attrs.messagec.a会取不到该值，并且可以接受多个来自祖组件的值

最后，组件通信的测试图如下：

image