本篇文章總結(jié)整理25個Vue小技巧，學(xué)了這么久才知道還能這么用，現(xiàn)在分享給大家，希望對大家有所幫助，讓編程生活變得更容易！

學(xué)習(xí)成為一個更好的Vue開發(fā)者并不總是關(guān)于那些需要花時間和精力才能掌握的大概念。掌握一些技巧和竅門，可以讓我們的編程生活變得更容易–沒有大量重復(fù)的工作。

在用 Vue 開發(fā)的這幾年里，我學(xué)到了很多有用的技巧。有些很取巧，有些幾乎每天都在用，有些則更高級–但它們都很有用。（學(xué)習(xí)視頻分享：vue視頻教程）

1、將一個 prop 限制在一個類型的列表中

使用 prop 定義中的 validator 選項，可以將一個 prop 類型限制在一組特定的值中。

export default {   name: 'Image',   props: {     src: {       type: String,     },     style: {       type: String,       validator: s => ['square', 'rounded'].includes(s)     }   } };

這個驗證函數(shù)接受一個prop，如果prop有效或無效，則返回true或false。

當(dāng)單單傳入的 true 或 false 來控制某些條件不能滿足需求時，我通常使用這個方法來做。

按鈕類型或警告類型(信息、成功、危險、警告)是最常見的用法、、。顏色也是一個很好的用途。

2、默認(rèn)內(nèi)容和擴展點

Vue中的槽可以有默認(rèn)的內(nèi)容，這使我們可以制作出更容易使用的組件。

<button class="button" @click="$emit('click')">   <slot>     <!-- Used if no slot is provided -->     Click me   </slot> </button>

我最喜歡使用默認(rèn)槽，就是用它們來創(chuàng)建擴展點。

我們可以取組件的任何部分，將其封裝在一個插槽中，在外面我們可以用想要的任何內(nèi)容覆蓋組件的該部分。默認(rèn)情況下，它仍然會按照原來的方式工作，但這樣做會有了