轉載 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