组件通信2：爷传孙（$attrs）

一，前言

1.在vue中我们可以使用props组件实现父子组件的单向数据传递。

2.然而当组件层级较多时，第一层级的组件要向第三层级的组件传递数据时，使用props一级一级传递，明显是不高效，且比较麻烦的。

3.vue中的$attrs可以实现组件的跨级数据传送。

二，$attrs

1.在vue2中，$attrs是组件的一个实例属性，包含了父作用域中 不作为 prop 被识别的属性。

//todoList定义了list,和name两个props属性，
const todoList={
	props:[list,name] 
	template:`<div></div>`
}

//当接受到这两个之外的属性，都会作为$attrs属性
<todo-list class='a' />

//组件实例的this.$attrs 会返回 {class:'a'}

2.在数据结构上，$attrs是一个对象，键是所有绑定的非props属性，值是相应非props属性的值，

3.我们可以将整个$attrs传递给组件内部的任一个组件，接受$attrs的组件一定要声明props来接收

<target v-bind="$attrs"></target> 

//对于target 组件，接受$attrs时需使用props声明$attrs里的每一个属性

4.本质上爷传孙也是一级一级的传，使用$attrs可以避免中间组件的props声明

三，注意事项

1.在vue中组件非props的属性会默认传递给绑定组件的根元素。我们可以使用inheritAttrs：false来禁止这种行为。