$attrs

一、概念

vue官网定义如下：

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

二、用处

vue中一个比较令人烦恼的事情是属性只能从父组件传递给子组件。这也就意味着当你想向嵌套层级比较深组件数据传递，只能由父组件传递给子组件，子组件再传递给孙子组件。

常用的几个组件之间数据传递的方法有如下几个：

1、通过 props 的方式向子组件传递(父子组件)

2、vuex 进行状态管理

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

4、$attrs的方式

三、示例

在vue中新建三个组件，分别为父组件(Father)，子组件(Son)和孙子组件(Grandson)。

父组件(Father)的代码如下：

<template>
    <div style="background: aquamarine">
        <div>Here is Father</div>
        <son :sonAge=20 :grandsonAge=10