Vue 父子组件数据传递( inheritAttrs + $attrs + $listeners)

当咱们在书写 vue 组件的时候，也许可能会用到数据传递；将父组件的数据传递给子组件，有时候也须要经过子组件去事件去触发父组件的事件；

每当咱们遇到这样的需求的时候，咱们老是会想到有三种解决办法：

1. 经过 props 的方式向子组件传递(父子组件)

2. vuex 进行状态管理(父子组件和非父子组件) vuex

3. 非父子组件的通讯传递 Vue Event Bus，使用Vue的实例，实现事件的监听和发布，实现组件之间的传递。

后来再逛社区的时候我又发现了还有第四种传递方式，inheritAttrs + $attrs + $listeners

附上原文连接Vue2.4版本中新添加的attrs以及listeners属性使用 和 Vue.js最佳实践（五招让你成为Vue.js大师）

基本是大部分的公司或者项目都是用前面两种，我司也不例外；好像曾经在官方文档看到过，vuex 适合用在大型的项目中。第三种方式我曾在个人毕设中用到过，其余地方我好像目前是没有看到，当时只有一个功能须要在兄弟组件之间传递数据，用 vuex 的话，大材小用，另外还须要时间成本。因此我选择了Vue Event Bus；最后一种方式的话，我目前尚未看到过在项目的应用。可是我我的以为既然有这个 api 那确定是有他存在的道理。否则它存在还有何意义的？？若是有需求我我的以为能够尝试用一用；拥抱变化，拥抱机会

工做以后发现，碰到 bug 有时候常规的方式，并不必定是最好的。跳出常规思惟，跳出常规方式去解决问题，可能会更加好。常规方法可以解决问题可是未免有些臃肿。在实践的采坑中体会更有意思

inheritAttrs + $attrs + $listeners

inheritAttrs ：默认是 true

个人解释就是：没有被子组件继承的父组件属性，不会当作特性展现在子组件根元素上面。提及来，听起来好像有些拗口，看截图看代码你就明白了

inheritAttrs :false

inheritAttrs :false

c='ture1.png'>

官方解释：默认状况下父做用域的不被认做 props 的特性绑定 (attribute bindings) 将会“回退”且做为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另外一个组件的组件时，这可能不会老是符合预期行为。经过设置 inheritAttrs到 false，这些默认行为将会被去掉。而经过 (一样是 2.4 新增的) 实例属性 $attrs 可让这些特性生效，且能够经过 v-bind 显性的绑定到非根元素上。

$attrs

个人解释就是：存放没有被子组件继承的的数据对象；看看图

官方文档解释：包含了父做用域中不做为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含全部父做用域的绑定 (class 和 style 除外)，而且能够经过 v-bind="$attrs" 传入内部组件——在建立高级别的组件时很是有用。

$listeners

个人理解就是：子组件能够触发父组件的事件（不须要用什么那些麻烦的vuex或者一个空的 Vue 实例做为事件总线，或者又是什么vm.$on )

官方文档解释：包含了父做用域中的 (不含 .native 修饰器的) v-on 事件监听器。它能够经过 v-on="$listeners" 传入内部组件——在建立更高层次的组件时很是有用。

最后一个总结

后续补上例子