专栏首页前端达人「vue基础」手把手教你编写 Vue 组件(上)

「vue基础」手把手教你编写 Vue 组件(上)

大家好,本篇文章我将带着大家一起学

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

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

自定义组件

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

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

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

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

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

组件参数介绍

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

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

字符串模板

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

DOM模板

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

HelloWorld.vue

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

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

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

效果如下图:

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

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

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

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

<div class="ui container"></div>

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

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

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

样式部分(src / StaffDirectory.vue)

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

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

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

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

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

小节

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

vue基础相关文章

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

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

本文分享自微信公众号 - 前端达人(frontend84),作者:前端达人

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 「vue基础」手把手教你编写 Vue 组件(下)

    如果你以前使用过React,那么你已经熟悉了组件相关的生命周期的概念。所谓的组件生命周期,就如同人一般从出生到消亡一样,有几个关键的阶段,在这几个关键的阶段,我...

    前端达人
  • Vue中组件之间8种通信方式,值得收藏

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样的关...

    前端达人
  • 「React 手册 」如何创建函数组件?

    大家好,在前面的几篇相关文章里,我们一起学习了如何使用类的方式声明组件,以及如何属性传值和处理本地数据状态,本篇文章我们一起学习如何使用函数的方式进行声明组件。

    前端达人
  • 厌倦了写活动页?快来撸一个页面生成器吧!

    如果你经常接触一些公司的活动页,可能会经常头疼以下问题:这些项目周期短,需求频繁,迭代快,技术要求不高,成长空间也小。但是我们还是马不停蹄的赶着产品提来的一个个...

    coder_koala
  • Vue全局组件和局部组件及组件传值

    就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。下面是使用在root根示例下的first-component全局组件: ...

    _kyle
  • 这 10 个技巧让你成为一个更好的 Vue 开发者

    我比较喜欢使用 Vue 来开发,所以有时会深入研究其功能和特性。 通过这篇文章,向你们介绍十个很酷的窍门和技巧,以帮助大家成为更好的 Vue 开发者。

    前端小智@大迁世界
  • vue.js之组件篇

    组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码。

    指尖改变世界
  • Vue中的15个最佳做法

    在需要操纵数据时,将key属性与v-for指令一起使用可以让程序保持恒定且可预测。

    刘亦枫
  • 几种分布式调用链监控组件的实践与比较(二)比较

    引言:最近在调研与选型分布式调用链监控组件。选了主要的三种APM组件进行了实践与比较。本来打算一篇文章写完的,篇幅太长,打算分两篇。距离《几种分布式调用链监控组...

    aoho求索
  • 几种分布式调用链监控组件的实践与比较(二)比较

    引言:继上篇《几种分布式调用链监控组件的实践与比较(一)实践》后,本篇将会讲下几种APM选型的比较与性能测试。

    纯洁的微笑

扫码关注云+社区

领取腾讯云代金券