vue3.x components 如何定义_通过一个简单的示例学习如何编写Vue组件

大家好,本篇文章我将带着大家一起学习如何编写自定义组件(Components),通过「vue基础」新手快速入门篇(一)这篇文章的学习,我们知道了 Vue 设计的目的就是为了方便我们创建基于组件UI的项目。基于这个设计原则,我们可以更专注于设计可重用、各自独立、基于接口方式的组件,就好比乐高玩具一样,我们可以基于组件组装我们的项目。

首先我们来看一个简单的例子,比如我们有一个头像的组件(avatar)用来展示用户的头像,我们只需要创建一次,我们就可以随意将此组件添加至项目需要用到的地方,十分方便。比如如下的集成方式:

bda70ab25a714a0eaf6415d4b621e3e9

从上述代码我们可以看出,在项目中集成组件十分方便,就类似一个 HTML 标签,这个标签我们可以自定义,比如这个例子,我们定义的是 , 除了自定义标签,你还可以自定义任何属性,同时可利用属性进行传值,比如这个例子我们自定义了src属性。

自定义组件

接下来,我们来学习如何编写Vue自定义组件。

首先我们来先了解下,在 「vue基础」新手快速入门篇(一)这篇文章我们通过引入JS文件快速熟悉了Vue,基于这种方式我们如何自定义组件呢。我们可以使用 Vue 这个全局对象声明组件,声明的函数接受两个参数,一个是组件的名称,一个是组件设置相关的参数对象,基于这种方式,我们可以用如下的方式,快速自定义组件:

0e8764a9c2974567a00bc54da7793c1b

关于组件的命名,你可以选择kebab case(短横线命名)的方式,例如 my-custom-componen,或者使用 pascal case(帕斯卡命名)首字母大写的方式进行命名,例如 MyCustomComponent,个人比较推荐使用 pascal case。

通过这种方式注册的组件可以在项目中的任何位置进行使用,并可以嵌套在其他组件的模板里,这样大大提高了我们开发的灵活性。

在本系列的上一篇文章里「vue基础」Vue相关构建工具和基础插件简介,我们介绍了单文件组件(single file components:SFCs) ,并且简单的介绍了如何声明组件,通过这种方式声明的组件,我们需要通过import的方式进行引用才能进行使用。在后面我会详细进行介绍。

组件参数介绍

通过Vue对象进行组件声明的设置相关参数和使用 new Vue 方式进行实例化的设置参数基本一致(这篇文章 「vue基础」新手快速入门篇(一)有介绍),但是还有两个重要的区别。

首先,组件不接受 el 这个参数,你需要提供 template 属性进行设置模板的内容。

字符串模板

d2b0ca0c7de243c4a07db870f50561af

如果字符串内容以 # 开头,Vue将会视为选择器,并在 DOM 中查找匹配的元素,然后将其内容作为模板的内容,如下所示:

DOM模板

d767e74387c5449e8a530e9be4c8b69b

如果你使用 SFCs 的方式创建组件,你需要使用 这样的标记在你的.vue文件中,如下所示:

HelloWorld.vue

5bf79296e04841509b361d1386595043

第二个不一样的地方就是组件的 data 参数属性必须是个函数声明,通过return的形式返回数据,每个组件包含一个数据对象实例。如下段代码所示:

29b78ee757864fe49f2e534a90fab76e

亲自动手实践一个简单的自定义组件

好了,接下来我们重新回到 「vue基础」新手快速入门篇(一)这篇文章的一个示例,我们来亲自动手将这个例子改写成一个 SFCs 方式的自定义组件,首先我门来看下原先示例的代码,关于代码的说明,这里我就不多说了,大家可以返会入门篇进行查看:

742c4b6c252740ca99028630e584dc15

效果如下图:

cc05366f4a06473ba232ca59db9caf4b

我们将会新建个 .vue 文件,首先你先通过构建工具创建一个Vue项目,不知道怎么创建的朋友们,可以看我的上一篇文章「vue基础」Vue相关构建工具和基础插件简介,里面有详细介绍,接下来我们按照默认的方式创建一个 Vue 项目。

打开项目文件夹,在 src/components 路径下,我们来创建一个 StaffDirectory.vue 的文件,按照如下的步骤添加代码,示例如下:

template部分(src/components/StaffDirectory.vue)

046d64548d5647d9bc07715360226b22

你可能会注意到我们基本没什么改动,直接把对应的相关区域复制到 标签内,但是有一点你需要各位注意,最外层一定要有个闭合标签,最外层不能多于1个,因此我们模板的最外层标签是:

脚本部分(src/components/StaffDirectory.vue )

5dc5da0364004f3b947f90b7678f9cde

你会注意到我们使用了 export 这个关键词,这是ES6+的新语法,允许我们通过模块导入的形式,在其他的组件文件里进行使用。

你可能还会注意到,我们这里有个 name 的属性,这个属性也很重要,它将会比较方便的辅助我们进行调试定位问题,稍后的文章会有介绍。因此千万别漏掉这个属性的设置。

样式部分(src / StaffDirectory.vue)

432d3215bb9b48508ac708324e5887cd

最后完成的组件代码,如下图所示:

64feebbd40a74d9ca1c95e12d0d4a7b7

最后在 App.vue 文件引入我们的组件

我们可以使用import语法进行引入我们的组件,示例代码如下:

2bb13df3e66b4f1fb4a2d3295ad1be09

你可能会注意这里我们导入了一个CSS样式库,在第一篇文章里我们是将CSS文件直接引入,这里你需要通过 npm 的安装这个CSS框架,相关命令:npm install semantic-ui-css

好了,到这里我们就完成了上篇文章的例子,通过 SFCs 的组件方式进行了改造,你可以通过npm run serve 看看运行效果是否一致。

小节

由于文章篇幅有限,关于组件的介绍,今天就介绍到这里,我们一起学习了如何编写一个简单的自定义组件,下一篇文章我们将继续深入学习组件的相关内容,比如组件的生命周期、属性传值、父子组件传值、槽(Slots),敬请期待。

vue基础相关文章

「vue基础」新手快速入门篇(一)

「vue基础」Vue相关构建工具和基础插件简介

推荐阅读更多精彩内容