组件在 vue开发中是必不可少的一环，用好组件这把屠龙刀，就能解决不少问题。
组件是什么
官方的定义：
组件是可复用的 Vue 实例，并且可带有一个名字。
官方的定义已经非常简明了，组件就是一个实例。
如何使用组件
在具体编写组件实例代码前，我们先来如下几个约定：
所有组件基于单文件组件，即一个 .vue文件就是一个组件
data 必须为一个函数
template 节点下只能有一个子节点
约束不多，但最后两个需要牢记在心。
基于单文件组件的前提下，一个组件的基本构造如下：
<template>
<div>
<!-- 页面内容 -->
</div>
</template><script>
export default {
// 组件的逻辑，数据部分
}
</script>
<style>
/** 样式定义 **/
</style>
一个单文件组件由三个部分组成：
页面内容，即视图部分，这部分是对数据的展示
逻辑，数据定义部分，这部分是定义、控制数据
样式部分，服务于视图
这三部分会在接下来的章节中一一实践，在本篇中并不会给出具体的实例代码。 本篇更侧重于讲清楚在写组件之前应该要注意的地方。
组件的命名
在这里向跑题的一点是：
不管是前端还是后端还是其他方向，命名一定要重视，并能给出准确的、无歧义的、简洁的命名
命名不仅仅是为了自己维护代码，更多的是为了团队、协作开发以及交流。良好的命名会让你的代码更具可读性，而良好的可读性会让你的代码更具可维护性。综上，希望童鞋们能认真命名，避免在项目中产出类似的命名：
var x = getSomething(y);var somethingA = getSomethingB();
...
在这里，vue官方是强烈建议遵循 W3C规范去为组件命名的：
字母全小写且分隔符使用连字符(短横线)：-
当然你也可以使用Pascal命名：
首字母大写，无分隔符
但是在使用组件时，都是使用的 W3C规范。假设现在你有一个名称为 HelloWorld的组件，那么如何在其他组件中使用：
<hello-world></hello-world>建议在命名时考虑以下因素：
词要达意，言简意赅，不要长篇大论
避免产生多义性
避免直接机翻中文，很多时候某些特有名词或者是业务中提炼出来的词并不适合直接机翻（机器翻译）。对同一机翻词汇，一百个人心中可能有一百种不同的解释
参考优秀开源项目的命名规范
参考语言/框架所推荐的规范
