接触一个东西，在技术上我们的一般思路是：这是个啥？怎么使用？有何存在意义？

本质探索

$props：当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

$attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。

$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

vuejs API

通过举个例子来聊聊。下面有一个子组件和一个父组件，引入就不详细了，写上template模板。

//childrenProp.vue（子组件）
<template>
    <label>
      <input v-on:input="$emit('input', $event.target.value)">
    </label>
</template>

// 父组件
<template>
    <div>
        <chidrenProp 
          v-model="username"
          label="pyc"
          value="12"
          class="username-input"
          placeholder="Enter your username">
        </chidrenProp>
    </div>
</template>

在childrenProp.vue组件中，我们来打印一下：

从上面打印的结果总结：

beforeCreate执行的时候，props还没有之执行，也就是undefined，但是$attrs和$listeners已经有了。

我们在mounted中打印一下实例看看：

 这三个属性就很明了结合官方解释理解一下。

注意：上面我们在父组件中明明没有绑定input事件，但是截图看$listeners里面出现了input属性，通过实践发现，是v-model引起的。也就是默认就有这个input事件，这样才能动态改动值。

继承原生属性

比如上面的例子，input输入框。我们有很多的原生属性，比如：name、placeholder、disabled等等。我们如果都定义在props显示接收，未免太过繁琐。所以官网出现了：v-bind="$props"这样的操作。v-bind

如果父组件传递很多的原生属性，那么我们在子组件中直接可以：

//good
<input v-bind="$props">

//bad
//而不是下面这样，如果很多的属性就特别繁琐
<input :name="name" :placeholder="placeholder" :disabled="disabled">

继承自定义组件的属性

用于多级组件嵌套需要传递数据的时候，如果仅仅是传递数据，使用vuex就有点大材小用。

我们就可以直接使用上面的v-bind的方法，将值传递过去。具体参见 嵌套组件传递数据，$attrs

inheritAttrs属性

默认为true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承。

上面的组件childrenProp.vue，我们在不设置inheritAttrs属性也就是默认为true的时候，看看DOM渲染。

那么如果设置为false呢？

 

结合定义，就很清楚了解了。

自己也在学习中，就比如$props属性也是新增2.2.0新增的。一起学习交流吧

参考：

https://zhuanlan.zhihu.com/p/25623356

https://github.com/jkchao/blog/issues/15

官网API