Vue 元件例項屬性的使用

2021-09-13 02:21:44 字數 1915 閱讀 2826

因為最近面試了

二、三十個人,發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。

所以稍微寫一點,讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。

因為 vue 文件已經是個很成熟的文件,並且實現的 demo 簡潔明瞭,我就不具體寫實現**了,文內只會貼需要關注的知識的文件位址

自定義元件上使用 v-model

一般可能會問怎麼在自己寫的元件上實現 v-model。因為一些同學用多了元件庫,用的心安理得,完全不去想為什麼元件庫可以用v-model做各種雙向繫結。問到如何自己寫的時候直接懵逼了,所以這個是一定要會的。如果能在回答一下子元件可以用model屬性,讓v-model不再需要對value這個props做雙向繫結就更好了, 說明你文件看的仔細。

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

所以記住拉,如果是簡單的子元件要同步資料到父元件,不要再傻傻的 prop + $emit, 在父元件裡修改資料了。
多個屬性的雙向繫結呢

如果你會用 v-model,那麼就要知道 v-model 只能繫結乙個屬性,如果父元件有多個需要和子元件的做雙向繫結的屬性怎麼辦?你可以會想到用物件或者陣列。但是這可以會導致操作過於複雜。然而可以用.async修飾符完成。

attrs && props

這是個不常用的屬性,但是在高階用法裡非常常見。比如我把元件庫里的多個元件封裝一層,成為乙個大的業務元件。我用這個大元件的時候需要靈活控制裡面元件庫的prop,將引數透傳到元件庫的元件裡。示例如下:

// my-search.vue

搜尋

// page.vue

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

有聰明的小夥伴說傳個物件進去,然而最後還是沒解決怎麼把這個物件繫結到el-input上。答案已經很接近了。

其實 vue 已經幫我們把這個物件弄好了,我們只要直接在el-input元件上寫v-bind="$attrs"

別忘了 v-bind 可以傳物件的啊!!

listeners

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

常用的例項屬性

其他我們比較常用的就是$refs$parent$children$el

不常用的例項屬性

$slots$scopedslots。slots 可以判斷父元件裡道理傳了哪些 slot 進來。其他的大家就去官網文件裡看把。

到這裡應該大家能了解到,除了 vue 文件除了教程章節,api 章節也至關重要。我覺得熟讀 vue 文件,vue 深度就能達到一定程度。至少面試問 vue 的話,如果連 api 都不熟,會比較扣分。如果需要更深入了解就去看原始碼,看優秀的元件庫的實現。。

其實我有很多也是從元件庫里學到的~ 建議有空多看看你經常使用的元件庫原始碼,至少比 vue 原始碼簡單多了。。而且更貼合我們的使用場景

Vue 元件例項屬性的使用

因為最近面試了 二 三十個人,發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點,讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件,並且實現的 demo 簡潔明瞭,我就不具體寫實現 了,文內只會貼需要...

vue呼叫元件的屬性 Vue 元件例項屬性的使用

前言 因為最近面試了 二 三十個人,發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點,讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件,並且實現的 demo 簡潔明瞭,我就不具體寫實現 了,文內只會...

Vue元件使用技巧 is屬性

首先,提起vue的元件,大家都不會陌生,使用起來就像使用普通標籤一樣簡單,功能也可以隨意定製,真的是很方便.但是基於html語法,一些特定的標籤,比如,等.在標籤下,只有標籤是有效的,同理表現下只有有效,那麼如果我們想加入自定義的元件該怎麼辦呢.這種方法顯然是不太適合的 my component u...