vue组件通讯新姿势

来源

阅读了大漠老师的文章：Vue组件数据通讯新姿势：$attrs 和 $listeners感觉受益匪浅，闲来无事，总结一下vue组件传值的方法

习惯的传值方式

啥也不说，先上图！！

我们常见的组件之间的传值大概都跑不出这幅图，父子、兄弟之间进行通讯。

1. 父组件传值子组件：父组件通过props下发给子组件
2. 子组件通过事件触发将数据emit给父组件
3. 父子组件之间的通讯也可以通过 ref 属性、$parent、$children等方法获取数据和事件。
4. 兄弟组件之间的通讯则用eventBus或者VueX（不是太复杂的工能，就没有必要使用VueX了，省的画蛇添足）
   这些经常用的就不说了。。。。

今天的主角

1.$attr

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

$$attrs中存放了父组件中绑定的不是props的属性，而子组件通过$attrs这个属性就可以获取到父组件要传给子组件的值。。

2.$listeners

官网解释：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

简单来说就是：事件监听，但是监听的事件对象不包括原生的方法，例如@click.native

//代码解释这两个属性的意义

// 父组件

   


// 子组件

嵌套组件内的应用

在封装组件的时候，有时候会出现组件套组件的情况就会出现祖孙之间的通讯。实现祖孙之间的通讯，如果换成我们经常用的方法（就是上面提到的非 $attr和 $listeners通讯方法），这样的话我们的我我们需要逐层封装方法，传值等等，代码是在是繁琐。而 $attr和 $listeners则很好的解决了这个问题。

//父亲的父亲的页面


// 父级页面

这样是不是就方便多了

小结

个人感觉这两个属性的出现还是非常棒的，最起码组件之间的通讯实现起来更简单了。技术有限，如果有什么不足的地方欢迎各路大神指教，谢谢