在日常项目开发过程中,往往离不开封装组件的过程。比如a页面有一个功能恰巧b页面和c页面也使用。这时候我们考虑到代码复用,会考虑将这个功能做成组件。这篇文章我们就来讲一讲开发vue组件时候的一些小技巧和一些黑(骚)科(操)技(作)。
我们会通过大量例子来一个个讲解所有本文例子代码已经上传到github
v-once
低开销静态组件首先我们用脚手架搭建一个项目,用来写我们的组件,我们用到的UI框架是Iview。功能组件的编写,离不开组件之间的通信
,这个相关的文章很多,本文就不详细阐述了,这里推荐一篇掘金的关于组件通信的文章,写的十分全面感兴趣的小伙伴可以去看看。
slot插槽
slot插槽在我们平常写组件的时候出场率应该很高。将 <slot>
元素作为承载分发内容的出口,我们可以在插槽内包含任何模板代码,这使得我们的组件更加的灵活。我们来讲一个比较经典的例子对话框组件,先看代码。
<template> <div> <div>头部</div> <div> <slot>默认内容</slot> </div> <div> <slot name="footer"> <Button>确认</Button> </slot> </div> </div> </template> <script> export default { name: "model" }; </script> 复制代码
model标签中除slot为footer
的代码,其他代码都将作为对话框的主体内容显示,这就是作用域插槽
的用法。而slot为footer
的代码将在底部操作按钮部分显示,对应<slot name="footer">
这就是具名插槽
的用法。
属性透传
属性透传的出现的场景不多,我们以UI组件的二次封装为例。假如你的项目中频繁使用一个UI组件,而且这个UI组件每次都要设置很多类似的属性,那么我们就可以进行二次封装,调用起来更加的方便,甚至可以在原有组件上扩展功能。我们来看一段二次封装Iview的Table组件的代码。
<script> import { Table } from "iview"; export default { name: "customizeTable", props: { ...Table.props, test: { type: [String], default: "扩展属性" } }, data() { return { defaultProps: { border: true, stripe: true } }; }, render(h) { var props = Object.assign({ ...this._props }, this.defaultProps); return h(Table, { props: props }); } }; </script>复制代码
//方法二
<template> <div> <Table v-bind="{...mergeProps}"></Table> </div> </template> <script> import { Table } from "iview"; export default { name: "customizeTable", props: { ...Table.props, test: { type: [String], default: "扩展属性" } }, computed: { mergeProps: function() { return Object.assign({ ...this._props }, this.defaultProps); } }, data() { return { defaultProps: { border: true, stripe: true } }; } }; </script><template> <div> <Table v-bind="{...mergeProps}"></Table> </div> </template> <script> import { Table } from "iview"; export default { name: "customizeTable", props: { ...Table.props, test: { type: [String], default: "扩展属性" } }, computed: { mergeProps: function() { return Object.assign({ ...this._props }, this.defaultProps); } }, data() { return { defaultProps: { border: true, stripe: true } }; } }; </script> 复制代码
首先我们通过Table组件的props属性获取的Table所有默认参数,然后通过this._props
实现属性透传,同时我们还可以在props中扩展你需要的属性如test
。方法一中绑定属性我们使用了render方法,这个我们在函数式组件中再细说。方法二中我们通过v-bind实现绑定对象中所有的属性。
我们先引用一下官网对于函数式组件的介绍
函数式组件,没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法。实际上,它只是一个接受一些 prop 的函数。在这样的场景下,我们可以将组件标记为 func