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, 在父元件裡修改資料了。

本章相關文檔連結：

• 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