转载 https://blog.csdn.net/viewyu12345/article/details/84031295
接触一个东西，在技术上我们的一般思路是：这是个啥？怎么使用？有何存在意义？
本质探索
$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
————————————————
版权声明：本文为CSDN博主「雨中畅游」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/viewyu12345/article/details/84031295