vue API 知識點（2） --- 選項 總結

一、選項 / 數據

1.data

　　當一個組件被定義，data 必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例，如果 data 仍然是一個純碎的對象，則所有的實例將被共享引用同一個數據對象。通過提供 data 函數，每次創建一個新實例后，我們能夠調用 data 函數，從而返回初始數據的一個全新副本數據對象。

 

2.props

　　props 可以是數組或者對象，用於接收來自父組件的數據。props 中使用對象可以配置高級選項，類型檢測，自定義驗證，設置默認值

　　可以使用以下選項

　　　　type：可以是原生構造函數中的一種：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義構造函數，或上述內容組成的數組。會檢查一個 prop 是否是給定的類型，否則拋出警告。

　　　　default：為 prop 指定一個默認值。如果該 prop 沒有被傳入，則換做用這個值。對象或數組的默認值必須從一個工廠函數返回

　　　　required：Boolean　　定義該 prop 是否是必填項

　　　　validator：function　　自定義驗證函數會將該 prop 的值作為唯一的參數帶入。返回 false 就給默認值，控制台有警告

　　props: {
　　　　// 檢測類型
　　　　height: Number,
　　　　// 檢測類型 + 其他驗證
　　　　age: {
　　　　　　type: Number,
　　　　　　default: 0,
　　　　　　required: true,
　　　　　　validator: function (value) {
　　　　　　　　return value >= 0
　　　　　　}
　　　　}
　　}

 

3.propsData

　　只用於 new 創建的實例中，創建實例時傳遞 props，主要作用時方便測試（開發的過程中基本用不到）

 

4.computed  計算屬性

　　計算屬性將被混入到 Vue 實例中，所有 geter 和 setter 的 this 上下文自動地綁定為 Vue 實例

　　注意如果你為一個計算屬性使用了箭頭函數，則 this 不會指向這個組件的實例，不過你仍然可以將其實例作為函數的第一個參數來訪問。

　　計算屬性的結果會被緩存，除非依賴的響應式 property 變化才會重新計算。注意，如果某個依賴（必須非響應式 property）在該實例范疇之外，則計算屬性是不會被更新的。　

　　<p>a + b 的結果是：{{ count }}</p>

　　computed: {
　　　　count(){
　　　　　　return this.a + this.b
　　　　}
　　}

　　計算屬性 vs 方法

　　<p>a + b 的結果是：{{ count() }}</p>

　　methods: {
　　　　count(){
　　　　　　return this.a + this.b
　　　　}
　　}

　　我們可以將同一函數定義為一個方法而不是一個計算屬性，兩種方式的最終結果確實是完全相同的。不同的是計算屬性是基於他們的響應式依賴進行緩存的。只在相應響應式依賴發生改變時他們才會重新計算求值。就是說只要 a 或者 b 還沒有發生改變，多次訪問 count 計算屬性會立即返回之前的計算結果，而不必再次執行函數。

　　相比之下，每當觸發重新渲染時，調用方法將總會再次執行函數，

　　我們為什么需要緩存?　假設我們有一個性能開銷比較大的計算屬性 A，他需要遍歷一個巨大的數組並做大量的計算，然后我們可能有其他的計算屬性依賴於 A。如果沒有緩存我們將不可避免的多次執行 A 的getter。如果不希望有緩存出現，請用方法代替。

　　計算屬性的 setter

　　計算屬性默認只有 getter ，不過在需要時也可以提供一個 setter

　　computed: {
　　　　str: {
　　　　　　get: function() {
　　　　　　　　return this.a + this.b
　　　　　　},
　　　　　　set: function(newVlaue) {
　　　　　　　　var abs = newValue.split(' ')
　　　　　　　　this.a = abs[0]
　　　　　　　　this.b = abs[abs.length - 1]
　　　　　　}
　　　　}
　　}

　　現在運行 this.str = '2 3 4 5'時，setter 會被調用，this.a 和 this.b 也會相應地被更新

　　

5.methods　事件處理

　　在模板中通過 v-on 定義方法名，在 methods 中定義方法

　　有時在內聯語句處理器中訪問原始的 DOM 事件，可以用特殊變量 $event 把它傳入方法

<button @click="count(200, $event)">按鈕</button>
<button @click="count2">按鈕2</button>

　　methods: {
　　　　count: function(val, event) {
　　　　　　if(event) {
　　　　　　　　event.preventDefault()
　　　　　　}
　　　　　　// ...
　　　　},
　　　　count2: function(event) {// 如果模板中什么都不傳遞，在這里可以默認直接接受一個參數就是 dom 對象
　　　　　　if(event) {
　　　　　　　　event.preventDefault()
　　　　　　}
　　　　　　// ...
　　　　}
　　}

　　

6.watch　監聽器

　　一個對象，鍵是需要觀察的表達式，值是對應回調函數，值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性

　　值是包括選項的對象，有三個選項

　　handler：回調函數，即監聽到變化時應該執行的函數

　　deep： Boolean，確認是否深度監聽

　　　　為了發現對象內部值的變化，可以在選項參數中指定 deep: true 注意監聽數組的變更不需要這么做

　　immediate：Boolean，為true時，將立即以表達式的當前值出發回調（進入頁面就開始監聽）

　　watch: {
　　　　a(){},
　　　　// 該回調會在任何被監聽的對象 property 改變時被調用，不論其被嵌套多深
　　　　b: {
　　　　　　handler: function(){},
　　　　　　deep: true
　　　　},
　　　　// 該回調將會在偵聽開始之后立即調用
　　　　c: {
　　　　　　handler: function(),
　　　　　　immediate: true
　　　　},
　　　　// 可以傳入回調數組，他們會被一一調用
　　　　d: [
　　　　　　handle1,
　　　　　　function handle2(){},
　　　　　　{
　　　　　　　　handler: function handle3(){}
　　　　　　}
　　　　]
　　}

 

二、選項 / DOM

在開發的過程中很少需要考慮這些東西，看看官網熟悉一下

　　到官網去了解一下

　　

 三、選項 / 生命周期鈎子

　　每個 Vue 實例在被創建時都要經過一系列的初始化過程，設置數據監聽，編譯模板，實例掛載到 DOM ，數據變化時更新 DOM 等，這里面有一系列的函數，稱之為生命周期鈎子

1.beforeCreate

　　在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用，此時組件的選項對象還沒有創建，el 和 data 並未初始化，因此無法訪問 methods，data，computed 等上的方法和數據

 

2.created

　　在實例創建完成之后被立即調用。這一步，實例已經完成以下配置：數據觀測(data observer)，property 和方法的運算，watch/event 事件回調。然而掛載階段還沒開始，$el property 目前尚不可用。這是一個常用的生命周期，這里面可以調用 methods 中的方法，改變 data 中的數據，並且修改可以通過 vue 的響應式綁定體現在頁面上，獲取 計算屬性 等等，通常我們在這里請求接口中的數據，

 

3.beforeMount

　　在掛在之前被調用，相關的 render 函數首次被調用，實例已經完成一下的配置：編譯模板，把 data 里面的數據和模板生成 html，完成了 el 和 data 初始化，注意此時還沒有掛載到 html 頁面上

 

4.mounted

　　實例被掛載后被調用，這時 el 被新創建的 vm.$el 替換了。如果跟實例掛載到了一個文檔內的元素上，當 mounted 被調用時 vm.$el 也在文檔內

　　注意 mounted 不會保證所有的子組件也一起被掛載，如果希望等到整個視圖都渲染完畢，可以在 mounted 內部使用 vm.$nextTick 

　　mounted(){
　　　　this.$nextTick(function(){
　　　　　　// ...
　　　　})
　　}

 

5.beforeUpdate

　　數據更新時調用，發生在虛擬 DOM 打補丁之前，這里適合在更新之前訪問現有的 DOM，比如手動移除已添加的事件監聽器。

　　該鈎子在服務器端渲染期間不被調用，因為只有初次渲染會在服務端進行

 

6.updated

　　由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。

　　當這個鈎子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用 計算屬性 或 watcher 取而代之。

　　注意 updated 不會保證所有子組件也都一起被重繪。如果你希望等到整個視圖都重繪完畢，可以在 updated 里使用 vm.$nextTick（同上）

 

 7.activated

　　被 keep-alive 緩存的組件激活時調用

　　該鈎子在服務器端渲染期間不被調用

 

8.deactivated

　　被 keep-alive 緩存的組件停用時被調用

　　該鈎子在服務器端渲染期間不被調用

 

9.beforeDestroy

　　實例銷毀之前調用。在這一步，實例仍然完全可用

　　該鈎子在服務器端渲染期間不被調用

 

10.destroyed

　　實例銷毀后調用，該鈎子被調用后，對應 Vue 實例的所有指令都被解綁，所有的事件監聽器被移除，所有的子實例也都被銷毀

　　該鈎子在服務器端渲染期間不被調用

 

11.errorCaptured

　　當捕獲一個來自子孫組件的錯誤時被調用，此鈎子會收到三個參數：錯誤對象、發生錯誤的組件實例和一個包含錯誤來源信息的字符串。此鈎子返回 false 以阻止該錯誤繼續向上傳播

　　可以在此鈎子中修改組件的狀態。因此在捕獲錯誤時，在模板或渲染函數中有一個條件判斷來繞過其他內容就很重要，不然該組件可能會進入一個無限的渲染循環

　　錯誤傳播規則

　　　　1.默認情況下，如果全局的 config.errorHandler 被定義，所有的錯誤仍會發送它，因此這些錯誤仍然會向單一的分析服務的地方進行匯報。

　　　　2.如果一個組建的繼承或父級從屬鏈路中存在多個 errorCaptured 鈎子，則它們將會被相同的錯誤一一喚起

　　　　3.如果此 errorCaptured 鈎子自身拋出了一個錯誤，則這個新錯誤和原本被捕獲的錯誤都會發送給全局的 config.errorHandler

　　　　4.一個 errorCaptured 鈎子能夠返回 false 以阻止錯誤繼續向上傳播。本質上是說’這個錯誤已經被搞定且應該被忽略‘。他會阻止其他任何會被這個錯誤喚起的 errorCaptured 鈎子和全局的 config.errorHandler

 

四、選項 / 資源

1.directives　自定義指令

2.filters　過濾器

3.components　組件

　　directives、filters、components 詳情在這里有介紹 vue API 知識點（1）---全局 API 總結

 

五、選項 / 組合

1.parent

　　指定已創建的實例之父示例，在兩者之間建立父子關系。子實例可以用 this.$parent 訪問父實例，子實例被推入到父實例的 $children 數組中

　　我們在開發中，基本上不會使用到 $parent 和 $children 。更多的是使用 props 和 events 實現父子組件通信，

 

2.mixins　混入

3.extends

　　允許聲明擴展另一個組件，而無需使用 Vue.extend。這主要是為了便於擴展單文件組件

　　這和 mixins 有點類似　

　　mixins、extends 在這篇文章中有詳細的介紹  vue API 知識點（1）---全局 API 總結

 

4.provide / inject 

　　provide 和 inject 主要在開發高階插件/組件庫時使用。並不推薦用於普通應用程序代碼中。

　　這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，並在其上下游關系成立的時間里始終生效。

　　解析：就是組件的引入層次過多，我們的子孫組件想要獲取祖先組件的資源，可以不使用 props 的方式依次傳遞給子孫組件，層次太多，代碼結構容易混亂。那么就可以使用 provide/inject 來做傳遞

　　官方注解

　　provide 選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的 property。在該對象中你可以使用 Symbols 作為key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的環境下可工作

　　inject 選項應該是一個字符串數組或一個對象，對象的key是本地的綁定名，

　　　　value 是 在可用的注入內容中搜索用的 key（字符串或 Symbol），或一個對象，該對象的

　　　　　　from property 是在可用的諸如內容中搜索用的 key（字符串或 Symbol）

 　　　　　　default property 是降級情況下使用的 value

　　個人解析

　　provide 是一個對象，或者是一個返回對象的函數，里面就包含要給子孫后代的東西，也就是屬性和屬性值

　　inject 一個字符串數組，或者是一個對象。屬性值可以是一個對象，包含 from 和 default 默認值

　　const Child = {
　　　　inject: {
　　　　　　foo: {
　　　　　　　　from: 'bar',
　　　　　　　　default: 'foo'
　　　　　　}
　　　　}
　　}

　　　　from 表示在可用的注入內容中搜索用的 key，default 當然就是默認值

 　　注意：provide 和 inject 綁定並不是可響應的。這是刻意為之的，然而，如果你傳入了一個可監聽的對象，那么其對象的 property 還是可響應的

 　　官方示例

 　　// 父組件
　　var Provider = {
　　　　provide: {
　　　　　　name: 'zhangning'
　　　　},
　　　　// ...
　　}

　　// 子組件注入
　　var Child = {
　　　　inject: ['name'],
　　　　created() {
　　　　　　console.log(this.name) // => 'zhangning'
　　　　}
　　}

　　利用 es 中的 Symbols、函數 provide 和對象 inject

　　const a = Symbol();
　　const Parent = {
　　　　provide(){
　　　　　　return {
　　　　　　　　[a]: 'zhangning187'
　　　　　　}
　　　　}
　　}

　　const Child = {
　　　　inject: { a },
　　　　// ...
　　}

　　在新版本中，使用一個注入的值作為一個 property 的默認值

　　const Child = {
　　　　inject: ['name'],
　　　　props: {
　　　　　　bar: {
　　　　　　　　default() {
　　　　　　　　　　return this.name
　　　　　　　　}
　　　　　　}
　　　　}
　　}

　　使用一個注入的值作為數據入口

　　const Child = {
　　　　inject: ['name'],
　　　　data() {
　　　　　　return {
　　　　　　　　bar: this.name
　　　　　　}
　　　　}
　　}

　　如果它需要從一個不同名字的 property 注入，則使用 from 來表示其源 property

　　const Child = {
　　　　inject: {
　　　　　　from: 'bar',
　　　　　　default: 'name'
　　　　}
　　}

　　與 prop 的默認值類似，你需要對非原始值使用一個工廠方法

　　const Child = {
　　　　inject: {
　　　　　　name: {
　　　　　　　　from: 'bar',
　　　　　　　　default: () => [1, 2, 3]
　　　　　　}
　　　　}
　　}

 　　在日常的開發中，我們經常會使用 Vuex 做狀態管理，但是 vuex 有時候太過於繁瑣。如果我們不想使用 vuex，這個時候我們就可以使用 provide/inject 這個方式來代替vuex，在跟組件中傳入變量，然后在后代組件中使用即可

　　// 在跟組件中提供一個非響應式變量給后代組件

　　export default {
　　　　provide() {
　　　　　　return {
　　　　　　　　text: 'zhangning'
　　　　　　}
　　　　}
　　}

　　// 后代組件注入 
　　export default {
　　　　inject: ['text'],
　　　　created() {
　　　　　　this.text = 'zhangning187'// 在我們使用 text 的時候它依然是 zhangning，而不是zhangning187
　　　　}
　　}

　　上面已經講過，provide 和 inject 綁定並不是可響應的，這是可以為之。當然我們也可以傳入一個可響應的對象，那么它的屬性也就是可響應的了

　　也就是說，Vue 不會對 provide 中的變量進行響應式處理。所以要想 inject 接受的變量是響應式的，provide 提供的變量本身就需要是響應式的。

　　由於組件內部的各種狀態就是可響應式的，所以我們直接在根組件中將組件本身注入 provide，此時，我們可以在后代組件中任意訪問根組件中的所有狀態，根組件就成為了全局狀態的容器

　　// 根組件提供將自身提供給后代組件
　　export default {
　　　　provide() {
　　　　　　return {
　　　　　　　　app: this
　　　　　　}
　　　　},
　　　　data() {
　　　　　　return {
　　　　　　　　text: 'zhangning'
　　　　　　}
　　　　}
　　}

　　// 后代組件 注入

　　export default {
　　　　inject: ['app'],
　　　　data(){
　　　　　　return{}
　　　　},
　　　　created: {
　　　　　　this.app.text = 'zhangning187'// 此時使用 text，它的值就是zhangning187
　　　　}
　　}

　　當然，我們也可以通過 $root 來獲取根節點，但是在團隊開發的過程中，如果所有的全局變量都統一定義在根組件中並不合適，而使用 provide/inject 不同模塊的入口組件傳給各自的后代組件可以完美解決這個問題

　　Vuex 和 provide/inject 區別在於，Vuex 中的全局狀態的每次修改都是可以追蹤回溯的，而 provide/inject 中變量的修改是無法控制的，通俗說就是，你不知道是哪個組件修改了這個全局狀態。

　　provide/inject 破壞了我們的單向數據流原則。如果多個后代組件同時依賴於一個祖先組件提供的狀態，那么只要有一個組件修改了這個狀態，則所有組件都會受到影響。這個使耦合度增加了，讓我們的數據變化不可控，在多人的開發過程中，這個可能會變得特別混亂。

　　以上看起來使用 provide/inject 做全局狀態管理好像很危險，所以我們要謹慎使用這個方式。

　　但是在組件開發的時候，vue 官方提倡我們使用這種方法。例如 elment-ui 

 

六、選項 / 其他

1.name

　　只有作為組件選項時起作用

　　允許組件模板遞歸地調用自身，注意，組件在全局用 Vue.component() 注冊時，全局 ID 自動作為組件的 name

　　指定 name 選項的好處就是便於調試，有名字的組件有更友好的警告信息，當在 vue-devtools 下，未命名組件將顯示成<AnonymousComponent>，這很沒有語義，通過提供 name 選項，可以獲得更有語義信息的組件樹

 

2.delimiters

　　了解一下就行，通常不會去更改插入分隔符

　　類型 Array<string>

　　默認值 ["{{", "}}"]

　　限制 這個選項只在完整構建版本中的瀏覽器內編譯時可用

　　改變純文本插入分隔符

　　示例

　　new Vue({
　　　　delimiters: ["${", "}"]
　　})
　　// 分隔符變成了 ES6 模板字符串的風格

 

3.functional

　　了解一下，通常用不到

　　類型 Boolean

　　使組件組狀態（沒有 data）和無實例（沒有 this 上下文）。他們用一個簡單的 render 函數返回虛擬節點，是他們渲染的代價更小

 

4.model

　　允許一個自定義組件在使用 v-model 時定制 prop 和 event。默認情況下，一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一下輸入類型比如單選框和復選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以回避這些情況產生的沖突

　　// 定義一個組件

　　Vue.component('my-check', {
　　　　model: {
　　　　　　prop: 'checked',
　　　　　　event: 'change'
　　　　},
　　　　props: {
　　　　　　value: String,
　　　　　　checked: {
　　　　　　　　type: Number,
　　　　　　　　default: 0
　　　　　　}
　　　　}
　　})

　　使用

　　<my-check v-model='foo' value='some value'></my-check>

　　以上代碼相當於

　　<my-check :checked='foo' @change='value=>{foo = val}' value='some value'></my-check>

　　我們先了解一下 input 中的 v-model 是怎么實現雙向綁定的。

　　<input type='text' v-model='msg'>

　　v-model 只是語法糖真正的實現方式

　　<input type='text' :value='msg' @input='msg=$event.target.value'>

　　真正的雙向綁定是通過監聽 input 事件

　　　　v-model 在內部為不同的輸入元素使用不同的屬性並拋出不同的事件

　　　　text 和 textarea 元素使用 value 屬性和 input 事件

　　　　checkbox 和 radio 使用 checked 屬性和 change 事件

　　　　select 使用 value 和 change 事件

　　我們可以自定義輸入框組件的 v-model，雙向綁定

　　Vue.component('my-input', {
　　　　template: `<input :value='value' @input='updateValue($event.target.value)' type='text'></input>`,
　　　　props: ['value'],
　　　　methods: {
　　　　　　updateValue(val) {
　　　　　　　　this.$emit('input', val)
　　　　　　}
　　　　}
　　})

　　let app = new Vue({
　　　　el: '#app',
　　　　data(){
　　　　　　message: ''
　　　　},
　　　　methods: {
　　　　　　handleInput(val) {
　　　　　　　　this.message = val
　　　　　　}
　　　　}
　　})

　　<div id='app'>
　　　　<my-input :value='message' @input='handleInput'></my-input>
　　</div>

　　上面的示例我們可以了解到，默認情況下，一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event，所以當我們在一個自定義組件上使用 v-model 並不能實現雙向綁定，因為自定義的組件並沒有默認的 value 和 input 事件，在使用時，我們需要按照上面那樣顯式的去聲明定義這些東西，這時，選項 model 就派上用場了，在定義組件的時候指定 prop 的值和監聽的事件（看到這里，上面寫的官網給出的例子也應該可以看明白了）

　　舉例

　　Vue.component('my-input', {
　　　　model: {
　　　　　　prop: 'uname',
　　　　　　event: 'handleChange'
　　　　},
　　　　props: {
　　　　　　uname: {
　　　　　　　　type: String,
　　　　　　　　default: 'zhangning'
　　　　　　}
　　　　},
　　　　methods: {
　　　　　　updateVal(val) {
　　　　　　　　this.$emit('handleChange', val)
　　　　　　}
　　　　}
　　})

　　模板

　　<template>
　　　　<div>
　　　　　　<input type='text' :value='uname' @input='updateVal($event.target.value)'>
　　　　</div>
　　</template>

　　使用組件

　　<my-input v-model='name' value='some value'></my-input>

　　等價於

　　　<my-input :uname='name' @handleChange='val=>{foo = val}' value='some value'></my-input>

　　上面的示例中我們就可以在自定義的組件中使用 v-model 來進行雙向綁定了（多看一下示例就明白了）

 

5.inheritAttrs

　　默認情況下父作用域的不被認作 props 的 attribute 綁定（attribute bindings）將會 回退 且作為普通的 HTML attribute 應用在子組件的根元素上，當撰寫包裹一個目標元素或另一個組件的組件時，這可能不會總是符合預期行為。通過設置 inheritAttrs 為 false，這些默認行為將會被去掉，通過實例 property $attrs 可以讓這些 attribute 生效，且可以通過 v-bind 顯性的綁定到非根元素上。

　　vue 中一個比較令人煩惱的事情是屬性只能從父組件傳遞給子組件，這也就意味着當你想向嵌套層級比較深組件數據傳遞，只能由父組件傳遞給子組件，子組件在傳遞給孫組件... 如果這樣的傳遞屬性只有一兩個還行，如果要傳遞很多個，這樣就會很繁瑣。這時我們要去想別的方法來解決這個問題，通過 vuex 可以解決，通過上面的 provide/inject 也可以解決。現在還有一個方法，就是我們現在所說的，通過 inheriAttrs 選項，以及實例屬性 $attrs

　　好像有點不好理解，下面看下示例應該就明白了

　　parent組件

<template>
  <div>
    <span>我是父組件</span>
    <childrenCom :name='name' :age='age' :sex='sex'></childrenCom>
  </div>
</template>

<script>
export default {
  name: 'parent',
  components: {
    childrenCom: ()=> import('./children')
  },
  data(){
    return {
      name: 'zhangning',
      age: 24,
      sex: '男'
    }
  }
}

　　children組件

<template>
  <div>
    <span>我是children</span>
    <div>得到的name:{{ name }}</div>
  </div>
</template>

<script>
export default {
  name: 'children',
  props: ['name'],
  data(){
    return{}
  },
  created: function() {
    console.log(this.$attrs)
  }
}
</script>

　　上面的代碼我們在 children 組件中只接收了 name 一個屬性，age 和 sex 屬性都沒用，在瀏覽器渲染出來的結果是

 　　我們可以看到：組件內沒有被注冊的屬性將作為普通 html 元素被渲染，如果想讓屬性能夠向下傳遞，即使 prop 組件沒有被使用，你也需要在組件上注冊，這樣做會使組件預期功能變得模糊不清，同時也難以維護組件的 DRY。在 Vue2.4 ，可以在組件定義中添加 inheritAttrs: false，組件將不會把未被注冊的 props 呈現為普通的 html 屬性，但是在組件里我們可以通過其 $attrs 可以獲取到沒有使用的注冊屬性，如果需要，我們在這可以往下繼續傳遞。

　　如果我們設置 inheritAttrs: false;

export default {
  name: 'children',
  props: ['name'],
  inheritAttrs: false,
  data(){
    return{}
  },
  created: function() {
    console.log(this.$attrs)
  }
}

　　頁面渲染如下

　　　　沒有注冊的 props 屬性沒有顯示出來

 

 　　下面講一下 $attrs 的使用

　　一個頁面由父組件，子組件，孫組件構成，如下

　　父組件

<template>
  <div>
    <span>我是父組件</span>
    <childrenCom :name='name' :age='age' :sex='sex'></childrenCom>
  </div>
</template>

<script>
export default {
  name: 'parent',
  components: {
    childrenCom: ()=> import('./children')
  },
  data(){
    return {
      name: 'zhangning',
      age: 24,
      sex: '男'
    }
  }
}
</script>

　　子組件

<template>
  <div>
    <span>我是children</span>
    <div>得到的name:{{ name }}</div>
    <ChildrenChildren v-bind='$attrs'></ChildrenChildren>
  </div>
</template>

<script>
export default {
  name: 'children',
  props: ['name'],
  inheritAttrs: false,
  components:{
    ChildrenChildren: ()=>import('./childrenChildren')
  },
  data(){
    return{}
  },
  created: function() {
    console.log('子組件')
    console.log(this.$attrs)
  }
}
</script>

　　孫組件

<template>
  <div>
    <span>我是孫組件</span>
    <div>{{ $attrs }}</div>
  </div>
</template>

<script>
export default {
  name: 'childrenChildren',
  inheritAttrs: false,
  created(){
    console.log('孫組件')
    console.log(this.$attrs)
  }
}
</script>

　　頁面渲染效果

 　　如果 attrs 被綁定在子組件 children 上，我們就可以在孫組件里獲取到 this.$attrs 的值，這個值就是父組件中傳遞下來的 props （除了子組件中 props 聲明的）

　　記住孫子組件里獲取到 this.$attrs 的值是除了子組件注冊的元素，除了子組件聲明的元素，上面例子我們在子組件 props 注冊聲明了 name ,那么我們在孫組件里獲取到的 $attrs 就不包含 name 屬性，this.$attrs = {age: 24, sex: '男'}

　　講一下 $attrs 的方便之處，以上面例子說下，如果我們想要在子組件中獲取父組件的 name 屬性值，在孫組件中獲取父組件的 age 屬性值，用 props 的話就必須從父組件把屬性值傳遞給子組件，在傳遞給孫組件，顯得有些臃腫，有些麻煩，但是用 $attrs 就不用這么麻煩，子組件綁定 $attrs ，孫組件就能獲取到除了 name 屬性外所有由父組件傳遞下來的屬性。如果孫子組件也想獲取到name屬性，那么再綁定個 name 就可以了

    <ChildrenChildren v-bind='$attrs' :name='name'></ChildrenChildren>

　　仔細體會一下，

　　舉個例子說一下 inheritAttrs 到底有什么作用

　　<template>
　　　　<children :name='name' :age='age' type='text'></children>
　　</template>

　　export default {
　　　　name: 'tt',
　　　　data() {
　　　　　　return {
　　　　　　　　name: 'zhangning',
　　　　　　　　age: 23
　　　　　　}
　　　　},
　　　　components: {
　　　　　　'children': {
　　　　　　　　props: ['name, 'age'],
　　　　　　　　template: '<input type="number">'
　　　　　　}
　　　　}
　　}

　　上面的代碼，我們在父組件中設置的 type='text' ，子組件里 input 上 type='number'，最終在頁面上的渲染 input 類型是 text ，父組件傳遞的 type='text' 覆蓋了 input 上 type='number' ，這里就有問題了，把我們 input 類型改變了，這不是我們想要的結果，這里去體會官網的原話，是不是有點恍然大悟的感覺。

　　這里就用到了 inheritAttrs ，在子組件中設置 inheritAttrs 為 false就會得到我們想要的結果。這下應該明白了 inheritAttrs 的作用了把。在默認情況下 vue 會把父作用域的不被認作 props 的特性綁定且作為普通的 html 特性應用在子組件的根元素上。其實綁定一些屬性是無所謂的，就是怕遇到這種特殊的，像上面 input 這種情況，這個時候 inheritAttrs: false 的作用就出來了。

　　當我們想要在孫組件中修改父組件中的數據，同步給父組件。使用 $listeners 屬性

　　在孫組件中 通過 this.$emit('upData', name) 傳遞數據。

　　在子組件上綁定 v-on='$listeners' 

　　在父組件中通過 @upData='fun' 接收，

 

6.comments

　　Boolean 默認值為 false

　　這個選項只在完整版構建版本中的瀏覽器內編譯時可用

　　當設為 true 時，將會保留且渲染模板中的 html 注釋，默認行為時舍棄他們

 

以上就是vue API 知識點 選項的總結