浅入深出Vue：组件

组件在 vue开发中是必不可少的一环，用好组件这把屠龙刀，就能解决很多问题。

组件是什么

官方的定义：

• 组件是可复用的 Vue 实例，而且可带有一个名字。

官方的定义已经很是简明了，组件就是一个实例。

如何使用组件

在具体编写组件实例代码前，咱们先来以下几个约定：

• 全部组件基于单文件组件，即一个 .vue文件就是一个组件

• data 必须为一个函数

• template 节点下只能有一个子节点

约束很少，但最后两个须要牢记在心。

基于单文件组件的前提下，一个组件的基本构造以下：

<template>
    <div>
        <!-- 页面内容 -->
    </div>
</template>

<script>
export default {
    // 组件的逻辑，数据部分
}
</script>

<style>
 /** 样式定义 **/
</style>

一个单文件组件由三个部分组成：

1. 页面内容，即视图部分，这部分是对数据的展现

2. 逻辑，数据定义部分，这部分是定义、控制数据

3. 样式部分，服务于视图

这三部分会在接下来的章节中一一实践，在本篇中并不会给出具体的实例代码。 本篇更侧重于讲清楚在写组件以前应该要注意的地方。

组件的命名

在这里向跑题的一点是：

• 不论是前端仍是后端仍是其余方向，命名必定要重视，并能给出准确的、无歧义的、简洁的命名

命名不只仅是为了本身维护代码，更多的是为了团队、协做开发以及交流。良好的命名会让你的代码更具可读性，而良好的可读性会让你的代码更具可维护性。综上，但愿童鞋们能认真命名，避免在项目中产出相似的命名：

var x = getSomething(y);

var somethingA = getSomethingB();

...

在这里，vue官方是强烈建议遵循 W3C规范去为组件命名的：

• 字母全小写且分隔符使用连字符(短横线)：-

固然你也可使用Pascal命名：

• 首字母大写，无分隔符

可是在使用组件时，都是使用的 W3C规范。假设如今你有一个名称为 HelloWorld的组件，那么如何在其余组件中使用：

<hello-world></hello-world>

建议在命名时考虑如下因素：

• 词要达意，言简意赅，不要长篇大论

• 避免产生多义性

• 避免直接机翻中文，不少时候某些特有名词或者是业务中提炼出来的词并不适合直接机翻（机器翻译）。对同一机翻词汇，一百我的心中可能有一百种不一样的解释

• 参考优秀开源项目的命名规范

• 参考语言/框架所推荐的规范

• 同一项目中，对于同一个业务知识、名词的翻译尽量保持一致（一样也是为了不多义性）

在同一个项目中，尽量保持统一风格

组件的注册

在另外一个组件中若是须要使用其它自定义组件，那首先是须要将组件注册。

而注册分为：

• 局部注册

• 全局注册

局部注册

局部注册的用法：

<template>
    <div>
        <!-- 第三步： 在页面中使用 -->
        <hello-world></hello-world>
    </div>
</template>

<script>

// 第一步：引入组件
import HelloWorld from 'your/component/path'

export default {

    // 第二步：在当前组件注册此组件，注册以后才能够在页面中使用
    components: [
        HelloWorld
    ]
}
</script>

上图咱们能够看到，在单文件组件中局部注册的使用步骤：

• 1. 将组件引入
• 1. 在当前组件中注册，这一步也就体现了局部二字，由于注册后的做用域仅在当前组件内。
• 1. 在视图中使用

全局注册

若是这个 HelloWorld组件是常常要用的一个 UI组件怎么办，若是使用局部注册那意味着每一个组件中都将存在第一步和第二步的重复代码。

看见重复代码，咱们应该造成一种想要干掉它的本能。由于重复代码属于项目中的坏味道，会让项目的总体质量降低，而且直接影响项目的可维护性和可扩展性。

想一想，当这个项目很是庞大，庞大到这个基础组件已经被成百上千个组件引用了，哪天你要改这个组件的文件名或者移动路径时，将是一场灾难。

所以，在 vue中提供了全局注册的办法。只需注册一次，剩余组件中第一步和第二步的代码就能够直接删掉，由于全局注册以后能够直接在视图中使用。

// main.js 入口文件，在建立根实例以前将其注册
import HelloWorld from 'your/component/path'

Vue.component('HelloWorld', HelloWorld)

new Vue({
    ...
})

可是这种手动全局注册单个组件也存在一个问题：

• 不够自动化，当组件数量繁多时，手动注册组件就又成了一个负担

这里童鞋们能够思考思考如何在 vue中实现自动全局注册组件。

写在后面

组件系统所包含的内容是至关丰富的，三言两语很难说完整，所以这里只提组件最基础的使用和注册以及在实践中会遇到的问题。

下一篇将会详细的说明子组件及在其上进行数据传递的相关知识，一样，也是以理论为主。也是做为基础篇的最后一篇~