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>

我最喜欢使用默认槽，就是用它们来创建扩展点。

我们可以取组件的任何部分，将其封装在一个插槽中，在外面我们可以用想要的任何内容覆盖组件的该部分。默认情况下，它仍然会按照原来的方式工作，但这样做会有了