解释：

• 组件传值的时候会用到 爷爷在父亲组件传递值，父亲组件会通过$attrs获取到不在父亲props里面的所有属性，父亲组件通过在孙子组件上绑定$attrs 和 $listeners 使孙组件获取爷爷传递的值并且可以调用在爷爷那里定义的方法

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法--$attrs/$listeners

• $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。

• $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

父组件：

<template>
  <vantInput :foo="foo" :boo="boo" :coo="coo" :doo="doo" title="这个是传递的" v-on:parentClick="parentClick"></vantInput>
</template>

<script>
import vantInput from "@/views/vant.vue"
export default {
  components: {
    vantInput
  },
  data () {
    return {
      foo: "这个是props 传递的内容，会在 $attrs 上不显示",
      boo: "Html",
      coo: "CSS",
      doo: "Vue"
    };
  },
  methods: {
    parentClick () {
      console.log('parentClick 事件')
    }
  }

}
</script>

<style>
</style>

子组件：

<template>

  <div>
    <p>foo: {{ foo }}</p>
    <p>子组件的$attrs: {{ $attrs }}</p>
    <p v-on="$listeners">这个是自动监听父组件parentClick事件</p>
  </div>

</template>

<script>

import Vue from 'vue';
import { Field } from 'vant';

Vue.use(Field);

export default {
  // inheritAttrs: false,   我暂时发现是可加可不加
  props: {
    foo: String // foo作为props属性绑定
  },
  data () {
    return {
      value: '',
    };
  },
  mounted () {
    this.$emit('parentClick');
  }

}
</script>

<style>
</style>

image.png

简单来说：$attrs与$listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。