图中 第一行是最高级组件里的两条数据’App‘和‘组件传值’，‘组件传值’是用笨办法每一个组件中都用props定义个属性接受，很费劲，数据多了不小心就出错；
‘App’是用attrs来实现的，官网是这么描述的：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
听完一顿蒙，使用完对它的理解是：
‘不作为 prop 被识别 (且获取) 的特性’的意思是：想另一个数据‘组件传值’就是被获取的特性，就不包含在￥attrs中，下图划圈的地方可以看见打印的￥attrs中没有传递‘组件传值’数据的变量，也就没有‘组件传值’字样，也就不在￥attrs属性中，在中间的组件中，只要这样绑定
<Three :msgC="msgB" v-bind="$attrs"> Great-grandson of App component </Three>
￥attrs中的数据一直传递到要用到他的地方的上一级，在目的地使用
即可获取。
<body><div id="app"></div><script> /*----------------------------------$attrs---------------------------------------- * 像这样多层组件之间如果像从父子间想最下面的组件传值，就不能在每一个组件中定义props用其中专很是繁琐容易出错，这时，用到 $attrs * 官网：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。 * 当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)， * 并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 * * 子组件中App字样是最高级组件传向最低级组件的数据 * */ //App的曾孙子 Vue.component('Three',{ data(){ return{ name:'Three' } }, props:{ msgC:String }, template:`<div style="border: 1px solid #333333;background-color: #3fc4ff"> {{ name }} <slot></slot> {{ msgC }}{{ $attrs.app }} </div>`, mounted(){ console.log(this.$attrs); } }); //App的孙子 Vue.component('Two',{ data(){ return{ name:'Two' } }, props:{ msgB:String }, template:`<div style="border: 1px solid #333333;background-color: #84ff16"> {{ name }} <slot></slot>{{ msgB }} <Three :msgC="msgB" v-bind="$attrs"> Great-grandson of App component </Three><!-- <Three v-bind="$attrs" v-on="$listeners"> Great-grandson of App component </Three>--> </div>`, mounted(){ console.log(this.$attrs); } }); //App的儿子 Vue.component('One',{ data(){ return{ name:'One', } }, props:{ msgA:String, }, template:`<div style="border: 1px solid #333333;background-color: #ff8140"> {{ name }} <slot></slot>{{ msgA }} <Two :msgB="msgA" v-bind="$attrs"> Grandson of App component </Two><!-- <Two v-bind="$attrs" v-on="$listeners"> Grandson of App component </Two>--> </div>`, mounted(){ console.log(this.$attrs); } }); //定义一个全局组件作为父组件，在它下面有多个子组件 定义在下面挂在元素之前，否则找不到 //1, 从父组件传一个字符串‘Attribute’到最下层的组件中，让最下层组件能获取这个值，需要在每一个组件中定义一个属性接受，并且传递给下一级组件，稍有不慎，变会出错，而且很乱，不易后期维护和更改代码 let App = { data(){ return{ name:"App", PassValue:'组件传值', } }, template: ` <div id="app" style="border: 1px solid #333333;"> {{ name }},{{ PassValue}} <One :msgA="PassValue" :app = 'name'>Child of App component</One> </div> `, mounted(){ console.log(this.$attrs); } }; let vm = new Vue({ el: "#app", data() { return {} }, components: { App }, template: '<App></App>', mounted(){ console.log(this.$attrs); } });</script></body>