如上代码，假如我想在子组件想获取到父组件的name属性值，在孙子组件获取父组件的age属性值，用props的话就必须在父组件把name和age的值通过props传递到子组件，子组件在通过props把age的值传递到孙子组件，到这里看明白了吧，孙子组件需要的age在子组件里没有用到，但是为了能让孙子组件获取到，你必须从父组件 传到子组件，在在子组件传递到孙子组件。
但是用$attrs就不用那么麻烦，如下：
<template> <div> <childcom :name="name" :age="age" :sex="sex"></childcom> </div> </template> <script> export default { 'name':'test', props:[], data(){ return { 'name':'张三', 'age':'30', 'sex':'男' } }, components:{ 'childcom':{ props:['name'], template:`<div> <div>我是子组件 {{name}}</div> <grandcom v-bind="$attrs"></grandcom> </div>`, components: { 'grandcom':{ template:`<div>我是孙子组件{{$attrs.age}}</div>`, } } } } } </script>
子组件绑定了"$attrs"，孙子组件就能获取到除了name属性外所有由父组件传递下来的属性。如果孙子组件也想获取到name属性那么，在绑定个name如下，
<grandcom v-bind="$attrs" :name="name"></grandcom>
细细体会下是不是这个道理。实在不行的话敲一敲代码自己试验下，你就会豁然开朗。
补充一下：inheritAttrs属性
关于inheritAttrs这个属性跟获取到$attrs的值没有关系，inheritAttrs通常在编写基础组件时候会用到。官网原话：默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。
注意：这个选项不影响 class 和 style 绑定。
在Vue2.4.0之前版本，组件内未被注册的属性将作为普通html元素属性被渲染。
inheritAttrs到底有啥用？到底用在哪里？看下边代码，
<template> <childcom :name="name" :age="age" type="text"></childcom> </template> <script> export default { 'name':'test', props:[], data(){ return { 'name':'张三', 'age':'30', 'sex':'男' } }, components:{ 'childcom':{ props:['name','age'], template:`<input type="number">`, } } } </script>
上面代码你觉得input上会怎么显示？ 父组件传递了type="text"，子组件里input 上type="number"，那渲染到页面会是什么样？渲染图如下：
默认情况.png
看到没，父组件传递的type="text"覆盖了input 上type="number"，这岂不是把我的input数据类型都给改变了，这岂不是有问题，这不是我想要的！！！！看到这里明白了吗？回头去体会下上面官网的原话！！！
需求：我需要input 上type="number"类型不变，但是我还是要取到父组件的type="text"的值，那么代码如下：
<template> <childcom :name="name" :age="age" type="text"></childcom> </template> <script> export default { 'name':'test', props:[], data(){ return { 'name':'张三', 'age':'30', 'sex':'男' } }, components:{ 'childcom':{ inheritAttrs:false, props:['name','age'], template:`<input type="number">`, created () { console.log(this.$attrs.type) } } } } </script>
页面渲染图如下：
需求.png
到这，我想大家都明白了inheritAttrs的作用了吧。默认情况下vue会把父作用域的不被认作 props 的特性绑定 且作为普通的 HTML 特性应用在子组件的根元素上。绑定就绑定，显示就显示，没啥大不了的，但是怕就怕遇到一些特殊的，就比如上面的input的情况，这个时候inheritAttrs:false的作用就出来啦。
顺道补充一下：$listeners