Vue 組件實例屬性的使用
前言
因為最近面試了二、三十個人，發現大部分都還是只是停留在 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 源碼簡單多了。。而且更貼合我們的使用場景
來源：https://segmentfault.com/a/1190000017483791
Vue 組件實例屬性的使用