大家好。在本文中，我将带您学习如何编写自定义组件。通过对文章“vue Foundation”(1)的学习，我们知道Vue设计的目的是为了方便我们创建基于组件UI的项目。基于这个设计原则，我们可以更专注于设计可重用的、独立的和基于接口的组件。就像乐高玩具一样，我们可以根据组件组装我们的项目。

首先，让我们看一个简单的例子。例如，我们有一个显示用户头像的头像组件。我们只需要创建一次，就可以将这个组件随意添加到项目需要使用的地方，非常方便。例如，以下集成方法：

从上面的代码中，我们可以看到在项目中集成组件非常方便，就像一个HTML标记一样，我们可以对其进行定制。例如，在这个例子中，我们定义了头像。除了自定义标记，您还可以自定义任何属性，同时，您可以使用属性来传递值。例如，在这个例子中，我们定义了src属性。

00-1010接下来，让我们学习如何编写Vue自定义组件。

首先，我们先来看看。在本文中，我们通过介绍JS文件来快速熟悉vue。我们如何以这种方式定制组件？我们可以使用Vue作为全局对象来声明一个组件。声明的函数接受两个参数，一个是组件的名称，另一个是与组件设置相关的参数对象。基于这种方法，我们可以通过以下方式快速定制组件：

关于组件的命名，可以选择kebab case(短横线命名)，比如my-custom-component，或者使用pascal case (Pascal命名)用大写字母来命名组件，比如my-custom-component。个人推荐帕斯卡案例。

以这种方式注册的组件可以在项目中的任何地方使用，并且可以嵌套在其他组件的模板中，这大大提高了我们开发的灵活性。

在本系列的最后一篇文章中，“vue基础”是对Vue相关构建工具和基本插件的简要介绍。我们介绍了单文件组件：SFCs)，并简要介绍了如何声明组件。以这种方式声明的组件需要通过导入来引用，然后才能使用。稍后我会详细介绍。

00-1010 vue对象进行组件声明相关的设置参数与new Vue进行实例化的设置参数基本相同(本文“Vue基础”初学者快速入门文章(1)介绍)，但有两个重要的区别。

首先，组件不接受参数el。您需要提供模板属性来设置模板的内容。

字符串模板

如果字符串的内容以#开头，Vue将被视为选择器，在DOM中找到匹配的元素，然后将其内容作为模板的内容，如下图所示：

DOM模板

如果您使用SFCs创建组件，您需要在中使用像模板/模板这样的标记。vue文件，如下所示：

HelloWorld.vue

第二个区别是组件的数据参数属性必须是函数声明，它以返回的形式返回数据，每个组件包含一个数据对象实例。如下段代码所示：

自定义组件

个简单的自定义组件

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

效果如下图：

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

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

template部分（src/components/StaffDirectory.vue）

你可能会注意到我们基本没什么改动，直接把对应的相关区域复制到 <template> 标签内，但是有一点你需要各位注意，最外层一定要有个闭合标签，最外层不能多于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相关构建工具和基础插件简介