vue嵌套样式_「vue基础」手把手教你编写一个简单的 Vue 组件

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

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

从上述代码我们可以看出，在项目中集成组件十分方便，就类似一个 HTML 标签，这个标签我们可以自定义，比如这个例子，我们定义的是 , 除了自定义标签，你还可以自定义任何属性，同时可利用属性进行传值，比如这个例子我们自定义了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 的方式创建组件，你需要使用 这样的标记在你的.vue文件中，如下所示：

HelloWorld.vue

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

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

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

效果如下图：

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

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

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

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

脚本部分(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相关构建工具和基础插件简介