25個值得了解的Vue小技巧，原來還能這么用！

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

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

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

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

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

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

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

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

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

2、默認內容和擴展點

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

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

我最喜歡使用默認槽，就是用它們來創建擴展點。

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