vue中的组件通信方式
$attrs和$listeners当多级组件嵌套需要传递数据时，通常使用的方式是通过vuex。但是如果只是传递数据而不做中间处理的话，用vuex来处理就有点大材小用了。为此，Vue2.4版本提供了另一种方法----$attrs/$listeners$attrs：包含父作用域中prop无法识别（和获取）的属性绑定（class和style除外）。当一个组件没有声明任何props时，所有的父作用域绑定（class和style除外）都会被包含在这里，内部组件可以通过v-bind="$attrs"传递。通常与interitAttrs选项一起使用。$listeners：包含父作用域中的v-on事件监听器（没有.native装饰器）。它可以将v-on="$listeners"传递给内部组件；它是一个包含了所有作用于这个组件的监听器的对象，你可以配合v-on="$listeners"将所有的事件监听器指向这个组件的特定子元素。inheritAttrs：默认值为true，继承所有应用于子组件根元素的父组件属性（props的特定绑定除外）作为一个普通的HTML特性，如果你不想让组件的根元素继承该特性setinheritAttrs:false，但是类属性会被继承。主要目的是将数据从父组件传递给子组件或孙组件。"foo":boo="boo":coo="coo":doo="doo"title="前端公虾"@func1='Func1Click'@func2='Func2Click'\>
子组件
子组件
foo:foo被绑定为props属性{{foo}}
子组件的$attrs:{{$attrs}}
<儿子v-bind="$attrs"v-on="$listeners"\>
孙子组件：
孙子组件
boo:{{boo}}
childCom2:{{$attrs}}
fuc1按钮fuc2按钮 曾孙组件：
曾孙组件
childCom3:{{$attrs}}
inheritAttrs默认情况下，父作用域中不被视为props的属性绑定将“回退”并作为普通HTML属性应用于子组件当组成一个包装目标元素或另一个组件的组件时，这可能并不总是按预期运行。通过将inheritAttrs设置为false，这些默认行为将被删除。这些特性可以通过实例属性$attrs生效，并且可以通过v-bind显式绑定到非根元素上。（注意：这个选项不影响class和style绑定）我们没有在子组件中做[inheritAttrs:false,//可以关闭自动挂载在组件根元素上的props中未声明的属性]，现在看子组件在浏览器上的渲染：当我们添加这个属性时：总结：父组件传递两个参数boo`coofoodootitle`给子组件，但是子组件内部的`props`只接收一个参数`foo`，not接收`boocoodootitle，没有接收到的冗余属性将作为子组件根元素的属性节点。html`形式会显示为：
如上情况是因为inheritAttrs选项默认为true，但这和$attrs有什么关系呢？我们来解读一下官网最后几句话：通过设置inheritAttrs为false，这些默认行为就会被去掉。这些特性可以通过实例属性$attrs生效，并且可以通过v-bind显式绑定到非根元素上。也就是说，如果在子组件中将inheritAttras选项设置为false，我们可以通过$attrs属性获取组件props中没有定义但在父组件中传入的属性值：childcomponent:created(){console.log(this.$attrs);//{"boo":"Html","coo":"CSS","doo":"Vue","title":"前端工匠"}}$attrs只是说结合inheritAttrs获取$attrs属性，两者结合最强大的是实现了深层组件之间的值传递。