这 10 个技巧让你更好的成为 Vue 开发者
我比力喜爱使用 Vue 来开发,所以有时会深入研讨其功效和特性。 通过这篇文章,向你们介绍十个很酷的窍门和技巧,以帮忙大家成为更好的 Vue 开发者。
插槽语法更美丽
随着Vue 2.6的推出,已经引入了插槽的简写方式,此前简写可用于事件(例如,@click表示v-on:click事件)或冒号表示方式用于绑定(:src)。 例如,假如有一个表格组件,则可以按以下方式使用此功效:
$on(‘hook:’)
假如要在created或mounted办法中定义自定义事件侦听器或第三方插件,并且需要在beforeDestroy办法中将其删除避免引发任何内存走漏,则可以使用此功效。 使用$on(‘hook:’)办法,我们可以仅使用一种生命周期办法(而不是两种)来定义/删除事件。
prop 验证
你大概已经知道可以将props验证为原始类型,例如字符串,数字乃至对象。 我们还可以使用自定义验证器,例如,假如要针对字符串列表停止验证:
动态指令参数
Vue 2.6 的最酷功效之一是可以将指令参数动态传递给组件。 假设有一个按钮组件,并且在某些状况下想监听单击事件,而在其他状况下想监听双击事件。 这就是动态指令派上用处的地方了
重用统一路由的组件
有时,我们不一样路由共用某些时,假如在这些路由之间切换,则默许状况下,同享组件将不会从新渲染,由于Vue 出于机能缘由会重用该组件。 但是,假如我们依然但愿从新渲染这些组件,则可以通过在路由器视图组件中供给:key属性来实现从新渲染。
从父类到子类的所有 props
这是一个非常酷的功效,可将所有prop从父组件传递到子组件。 假如我们有另一个组件的包装器组件,这将特殊利便。 由于,我们不必一个一个将prop传递给子组件,而是一次传递所有prop:
上面的可以代替下面的做法
从父类到子类的所有事件侦听器
假如子组件不在父组件的根名目下,则可以将所有事件侦听器从父组件传递到子组件,如下所示:
假如子组件位于其父组件的根名目下,则默许状况下它将获得那些组件,因此不需要此小技巧。
$createElement
默许状况下,每个Vue实例都可以拜访$createElement办法来创立和返回虚拟节点。例如,可以利用它在可以通过v-html指令传递的办法中使用标志。在函数组件中,可以将此办法作为渲染函数中的第一个参数拜访。
使用 JSX
由于Vue CLI 3默许支撑使用JSX,因此此刻(假如情愿)我们可以使用JSX编写代码(例如,可以利便地编写函数组件)。 假如尚未使用Vue CLI 3,则可以使用babel-plugin-transform-vue-jsx获得JSX支撑。
自定义 v-model
默许状况下,v-model是@input事件监听器和:value props上的语法糖。但是,我们可以在Vue组件中指定一个模型属性,以定义使用什么事件和值
总结
但愿这些窍门和技巧对你有所帮忙,假如你也知道哪些技巧,欢迎留言。
引荐教程:《JS教程》
以上就是这 10 个技巧让你更好的成为 Vue 开发者的具体内容,更多请关注百分百源码网其它相关文章!