这是Dev.to提供的文章“ 使您成为更好的VueJS开发人员的10个技巧和窍门 ”的免费翻译。 作者将告诉我们有关使用常规VueJS工具的有趣且有用的选项。
引言
我非常喜欢与VueJS一起工作，每次这样做，我都会更深入地研究其功能和特性。 在本文中，我向您介绍了您可能不知道的10个很酷的提示和技巧，它们将帮助您成为VueJS上最好的开发人员。
让插槽的语法漂亮
随着Vue 2.6的发布，插槽的缩写变得可用，可以用作事件（例如， v-on:click的@click缩写v-on:click ）或用于数据绑定的冒号 （ :src ）。 例如，如果您有表格组件，则可以使用以下功能 ：
<template> ... <my-table> <template #row="{ item }"> /* some content here. You can freely use 'item' here */ </template> </my-table> ... </template>
$ on（'hook：'）
如果需要在已created或已mounted挂钩中定义自定义事件侦听器或第三方插件，并且需要在beforeDestroy挂钩中将其删除以防止内存泄漏，则可以使用此功能。 使用$on('hook:')您可以在一个钩子中定义或删除事件。
mounted() { const aThirdPartyPlugin = aThirdPartyPlugin() this.$on('hook:beforeDestroy', () => { aThirdPartyPlugin.destroy() }) }
验证道具
也许您已经知道，可以使用原始值（例如String ， Number或Object来验证您的道具。 但是您也可以创建一个自定义验证器，例如检查字符串数组：
alertType: { validator: value => ['signup', 'login', 'logout'].includes(value) }
动态指令参数
VueJS 2.6最酷的功能之一是能够动态确定组件指令参数。 假设您有一个按钮组件，并且想在某些情况下监听Click事件，而在所有其他情况下都想监听DoubleClick事件。 在这种情况下，这样的指令可能会派上用场：
<template> ... <aButton @[someEvent]="handleSomeEvent()"/> ... </template> <script> ... data(){ return{ ... someEvent: someCondition ? "click" : "dblclick" } }, methods:{ handleSomeEvent(){ // handle some event } } ... </script>
真正酷的地方->这是您可以将此模板应用于动态HTML属性，道具等！
重用类似路线的组件
有时您有使用某些组件的不同路由。 如果您在这些路由之间切换，则默认情况下不会重绘公共组件，因为Vue会重用该组件以获得更好的性能。 但是，如果要重绘这些组件，则可以在Router-View-Component定义:key属性：
<template> <router-view :key="$route.fullPath"></router-view> </template>
将所有道具从父级传递到子级组件
这是一个非常酷的功能，可以将所有道具从父组件传递到子组件。 例如，如果您使用包装器组件，则此方法很方便。 因此，您无需一次传递所有属性，而只需一次传递它们：
<template> <childComponent v-bind="$props"/> </template>
相反：
<template> <childComponent :prop1="prop1" :prop2="prop2" :prop3="prop3" :prop4="prop4" ... /> </template>
将所有事件侦听器从父组件传递到子组件
如果子组件不是父组件的根，则可以将所有事件侦听器从父组件传递到子组件，如下所示：
<template> <div> ... <childComponent v-on="$listeners"/> ... </div> </template>
如果子组件位于父组件的根目录，那么您将不需要这种技巧，并且默认情况下所有事件都是可用的。
$ createElement
每个Vue实例默认都可以访问$createElement ，该$createElement创建并返回虚拟节点。 例如，可以在可传递给v-html指令的方法中使用标记。 在功能组件中，此方法可用作render函数的第一个参数。
使用JSX
从Vue CLI 3开始，默认情况下已显示JSX支持 。 现在，您可以使用JSX编写代码（例如，如果您对反应感到更舒服），它也可以更加方便，例如，编写功能组件。 如果尚未使用Vue CLI 3 ，则可以使用babel-plugin-transform-vue-jsx在项目中支持JSX。
自定义v模型
默认情况下， v-model是@input和:value事件上的语法糖。 但是您可以在Vue组件中指定model属性，并确定将使用哪个事件和道具：
export default: { model: { event: 'change', prop: 'checked' } }
结论
希望我能给您一些提示，以帮助您成为最好的VueJS开发人员。