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

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

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

1、將一個(gè) prop 限制在一個(gè)類(lèi)型的列表中

使用 prop 定義中的 validator 選項(xiàng)，可以將一個(gè) prop 類(lèi)型限制在一組特定的值中。

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

這個(gè)驗(yàn)證函數(shù)接受一個(gè)prop，如果prop有效或無(wú)效，則返回true或false。

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

按鈕類(lèi)型或警告類(lèi)型(信息、成功、危險(xiǎn)、警告)是最常見(jiàn)的用法、、。顏色也是一個(gè)很好的用途。

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

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

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

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

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