$attrs官方文档

https://cn.vuejs.org/v2/api/#vm-attrs

什么叫“父作用域中不作为 prop 被识别 (且获取) 的特性绑定”

父作用域给子组件设置prop的时候，比如你设置了2个prop，:sortName="sortName" :partShow="partShow"，其中sortName被子组件作为prop接收了，代码范例：

  props: {
    sortName: {
      type: String,
      default: ''
    }
  },

另一个partShow没有接收，会怎样？partShow会被当做普通属性，渲染在节点上：

image.png

partShow就是“父作用域中不作为 prop 被识别 (且获取) 的特性绑定”。$attrs就包括partShow。

为什么要使用$attrs

父->子组件传递数据，是使用props来接收数据，根本不需要$attrs，但是，如果是爷爷->孙子组件传递数据，需要父亲组件做一个中继，接收的属性对自身没有用，只对孙子组件有用，等于父亲组件要写一遍props，孙子组件要写一遍props，这就比较麻烦了，$attrs就是为了解决这个问题。

使用$attrs

现在，爷爷组件不做任何修改，父亲组件加一行inheritAttrs:false，官方文档是：

https://cn.vuejs.org/v2/api/#inheritAttrs

export default {
  inheritAttrs:false,
}

inheritAttrs:false意思是不继承属性，也就是说，爷爷的遗产，我放弃继承，加上这句，则渲染后的节点上，没有partShow="true"这些字符，不加，则有这些字符。我们当然希望不要有这些字符。

同时，父亲作用域的孙子组件要写上v-bind="$attrs"，意思是给孙子组件绑定一系列属性，而这些属性就来自于爷爷组件。

孙子组件这么使用这一系列属性呢？就用props正常接收即可。

小结

这里面涉及到的语法有2个：inheritAttrs:false和v-bind="$attrs"，其中inheritAttrs:false可有可无，影响不大，核心其实就是父亲作用域给孙子组件加上v-bind="$attrs"。

孙子->爷爷传递信息

vue.js也提供了$listener实现这个目的，使用方法也简单，就是在父亲作用域的孙子组件的v-bind="$attrs"旁边，写上v-on="$listeners"即可。其他该怎么写就怎么写，爷爷组件要写监听事件，孙子组件要使用this.$emit()触发事件。就不多说了。