# 什么是组件？
开篇我们先简单聊一下前端组件化。什么是组件化？在前端界，特别是现在 React，Vue，Angular 几大流行开发框架的盛行的时代下，已经把组件化的设计思想推向了一个新的高度了，出现了框架与组件共同繁荣的景象。
组件简单的来说就是可实现独立的功能的单一整体代码片段，无论把这个片段放在哪里，它还是保持着原有的功能和样式，从而可以实现复用，这种整体独立化的设计思想就是组件化，而这样设计出来的单一整体代码片段叫做组件。这样的设计可以非常灵活的使用在项目中，项目设计更具系统性，从而提高了项目管理开发效率。
如果上面说的比较拗口，来点简单的。比如一座房子，把房子看成一个独立的整体由屋顶、窗户、门，墙等组成。
用代码来表示就是：
<template>
<!-- 这是一个房子 -->
<view>
<!-- 屋顶 -->
<roof></roof>
<!-- 墙 -->
<wall></wall>
<!-- 窗户 -->
<window></window>
<!-- 门 -->
<door></door>
</view>
</template>
那么换成一个页面呢？一个完整的页面由页头，内容，页脚等组成：
<template>
<view>
<!-- 页头 -->
<page-header></page-header>
<!-- 内容 -->
<content></content>
<!-- 页脚 -->
<pager-footer></pager-footer>
</view>
</template>
那我们在开发页面的时候，头部和尾部都是固定不变的，只要内容更改就行。在开发框架中，页面其实也是作为组件化的一部分，但是我们组件更多关注的是页面的每个部件，比如头部，内容区，弹出框甚至确认按钮都可以作为一个组件，每个组件有独立的HTML、css、js代码。
# 基础组件
Uniapp 根据多端的特性以 Vue 语法糖 + 小程序的 API 打造了一大批组件，这些组件在开发的时候以 HBuliderX 为 IDE，生产的时候把那些代码编译转换为各个平台特性的语法与 API。
Uniapp 框架根据组件的设计思想为我们设计提供了一系列的基础组件，我们可以通过组合这些基础组件进行快速开发。每一个基础组件都独立定义了样式与功能， 这些基础组件中比如 button 组件，你可以设置按钮的大小，文字样式，里面的回调时机，这个按钮组件具有独立的并且有完整的多样化功能，相当于我们以参数的形式去定义这个按钮。
Uniapp 基础组件分为以下八大类：
- 视图容器（View Container）
- 基础内容（Basic Content）
- 表单组件（Form）
- 导航（Navigation）
- 媒体组件（Media）
- 地图（Map）
- 画布（Canvas）
- webview（Web-view）
这些基础的组件可以让我们快速的开发项目，由于每个人都处理的业务功能都不一样，就需要根据自己的业务情况去定制一个组件。如果 Uniapp 基础组件没有你想要的组件，而你又需要一个代码片段来实现功能的复用，那么你可以根据组件规范来注册属于自己自定义的组件。
# 自定义组件
在数据绑定的三大框架 Angular、React、Vue 中，所有的元素都可以细分为一个组件，甚至是一个页面。这个组件可以重复的复用，组件的使用也造就了当今的前端的繁华的原因之一，当然现在使用的 Uniapp 也不例外，合成小程序，weex，h5 等的共有特性。
一个组件由三大部分组成：template 模板，js 数据交互和 css 样式层：
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<button @tap="getMsg">{{title}}</button>
</view>
</template>
<script>
export default {
// props 是从父级（引用当前组件）的变量占位，在当前组件下给这些变量一个初始化值（initValue）
props:{
title: {
type: String,
default: ''
},
list:{
type: Array,
default () { // 这里返回值需要是一个函数
return []
}
}
},
data() {
return {
title: 'Hello'
}
},
created() {
},
methods: {
getMsg () {
console.log('I am demo')
this.$emit('getMsg', this)
}
}
}
</script>
<style lang="scss">
...
</style>
