Vue 組件實例屬性的使用

前言

由於最近面試了2、三十我的，發現大部分都仍是隻是停留在 Vue 文檔的教程。有部分連教程這部分的文檔也沒看全。
因此稍微寫一點，讓新上手的 Vuer 多瞭解 Vue 文檔的其餘更須要關注的點。

由於 Vue 文檔已是個很成熟的文檔，而且實現的 demo 簡潔明瞭，我就不具體寫實現代碼了，文內只會貼須要關注的知識的文檔地址

v-model

自定義組件上使用 v-model

通常可能會問怎麼在本身寫的組件上實現 v-model。由於一些同窗用多了組件庫，用的問心無愧，徹底不去想爲何組件庫能夠用 v-model 作各類雙向綁定。問到如何本身寫的時候直接懵逼了，因此這個是必定要會的。若是能在回答一會兒組件能夠用 model 屬性，讓 v-model 再也不須要對 value 這個 props 作雙向綁定就更好了, 說明你文檔看的仔細。

其實 v-model 就是 prop + $emit 的語法糖, 能夠拆成 value 和 @input

因此記住拉，若是是簡單的子組件要同步數據到父組件，不要再傻傻的 prop + $emit, 在父組件裏修改數據了。

本章相關文檔連接：

• v-model
• model

多個屬性的雙向綁定呢

若是你會用 v-model，那麼就要知道 v-model 只能綁定一個屬性，若是父組件有多個須要和子組件的作雙向綁定的屬性怎麼辦？你能夠會想到用對象或者數組。可是這能夠會致使操做過於複雜。然而能夠用 .async 修飾符完成。

本章相關文檔連接：

• .async修飾符

實例屬性

attrs && props

這是個不經常使用的屬性，可是在高級用法裏很是常見。好比我把組件庫裏的多個組件封裝一層，成爲一個大的業務組件。我用這個大組件的時候須要靈活控制裏面組件庫的 prop，將參數透傳到組件庫的組件裏。示例以下：

// my-search.vue
<template>
  <el-input v-model='myValue'/>
  <el-button>搜索</el-button>
</template>

// page.vue
<template>
  <my-search placeholder='請輸入搜索'></my-search>
</template>

有的小夥伴回答在 my-search 裏定義這個 prop ，而後傳到 el-input 裏。然而他有 20 多個 prop，這樣太麻煩了。

有聰明的小夥伴說傳個對象進去，然而最後仍是沒解決怎麼把這個對象綁定到 el-input 上。答案已經很接近了。

其實 Vue 已經幫咱們把這個對象弄好了，咱們只要直接在 el-input 組件上寫 v-bind="$attrs"。

別忘了 v-bind 能夠傳對象的啊！！

本章相關文檔連接：

• $attrs
• $props
• v-bind

listeners

上面搞定了 props 的透傳，別忘了還有事件的透傳。同理 Vue 已經幫咱們弄好了。v-bind="$listeners"。

本章相關文檔連接：

• $listeners
• v-on

經常使用的實例屬性

其餘咱們比較經常使用的就是 $refs、$parent、$children、$el。

不經常使用的實例屬性

$slots、$scopedSlots。slots 能夠判斷父組件裏道理傳了哪些 slot 進來。其餘的你們就去官網文檔裏看把。

先到這

到這裏應該你們能瞭解到，除了 Vue 文檔除了教程章節，API 章節也相當重要。我以爲熟讀 Vue 文檔，Vue 深度就能達到必定程度。至少面試問 Vue 的話，若是連 API 都不熟，會比較扣分。若是須要更深刻了解就去看源碼，看優秀的組件庫的實現。。

其實我有不少也是從組件庫裏學到的~ 建議有空多看看你常用的組件庫源碼，至少比 Vue 源碼簡單多了。。並且更貼合咱們的使用場景