早期的web项目开发者通常都会写一张完整的html页面出来，到后来web项目越来越复杂，一个页面中包含了太多的html和js，阅读和修改变的困难了起来。现在的很多前端框架都支持模块化——将web页面根据功能分成一个一个的小块，然后再将它们放到一起组成一个完整的应用，而每个模块只留下一些必要的对外接口，这样功能就变的清晰了起来。vue的组件功能就是为了实现模块化开发的而存在的。
一、起步
先来看一个例子：
Vue.component('zu', {
data: function () {
return {
count: 0
}
},
template: '<div>点击了{{count}}次 <button @click="count++">点击</button></div>'
});
let app = new Vue({
el: '#app',
data: {
}
});
<zu></zu>
这个例子创建了一个简单的组件，当点击时可以看到数字的增加：
组件是可复用的Vue实例，所以每个组件都可以说是一个完整的Vue对象，也有data，methods，computed这样的选项，唯一的区别就是没有挂载元素的el选项。
组件可多次使用：
<zu></zu> <zu></zu> <zu></zu>
组件“zu”使用了3次，每一个中的data互不影响
从例子中可以看到，我们使用Vue.component的方法来创建一个组件，第一个参数是组件的名称（也是使用时的名称），data为组件的数据，template则是组件的模板。这个语法很好理解，只有data的语法似乎有些不太一样——组件的data必须是一个函数，在函数中返回一个对象。
组件的名称和普通的html的命名一样，另外也可以是驼峰式命名，在使用的时候用中划线语法：
Vue.component('zuJian', {
data: function () {
return {
count: 0
}
},
template: '<div>点击了{{count}}次 <button @click="count++">点击</button></div>'
});
<zu-jian></zu-jian>
<zu-jian></zu-jian>
为了统一期间，kano建议大家还是统一用中划线的语法命名组件。
二、组件树
通常来说一个应用会是一颗组件树的形式，我们来看一下官方文章中的组件形式图：
也就是说，一般一个应用中是由很多组件组成的，而组件之间也是包含的，大的组件中包含几个小的组件。
三、通过props向组件传值
到目前为止，组件似乎就是页面分割出去一部分的一个小型html页面，如果只是如此那么组件的功能将很不灵活，我们也难以根据外部的数据改变组件的显示。所以我们有props，它可以向组件中传值——某种意义上来说组件相对于页面就好像函数相对于代码而言，而props就是向函数中传递的参数。
实际上，组件中显示的数据通常是由外部传递进去的
Vue.component('zu', {
props: ['title'],
template: '<h2>{{title}}</h2>'
});
<zu title="第一个组件"></zu>
<zu title="第二个组件"></zu>
props是一个数组，定义组件可以接受的参数列表，在使用组件时，将参数以html属性的形式传进去就可以。
当然参数不一定就是字符串类型，传递对象类型的参数：
Vue.component('zu', {
props: ['person'],
template: '<div>{{person.name}} 年龄是：{{person.age}}</div>'
});
let app = new Vue({
el: '#app',
data: {
person1: {
name: '王二',
age: 18
},
person2: {
name: '二王',
age: 80
}
}
});
<zu :person="person1"></zu>
<zu :person="person2"></zu>
注意到绑定属性用的是“:person”，因为这次绑定的值是对象而不是简单的字符串直接量了。
在组件上使用v-for：
data: {
person_list: [
{
name: '王二',
age: 18
},
{
name: '二王',
age: 80
}
]
}
<zu :person="person" v-for="person in person_list"></zu>
效果相同，可以看到组件的使用和普通的html标签的使用并无太大区别。
四、单个根元素
上面的组件的模板都很简单：只包含一个div元素。你可能会想我现在要建立一个模板，让上例中的姓名和年龄都单独占一行，如：
Vue.component('zu', {
props: ['person'],
template:
`<div>姓名：{{person.name}}</div>
<div>年龄：{{person.age}}</div>`
});
但如果你这么写，Vue会一个错，显示“every component must have a single root element”（每个组件必须只有一个根元素）。
解决方法是用一个根元素将它们包起来：
Vue.component('zu', {
props: ['person'],
template:
`<div>
<div>姓名：{{person.name}}</div>
<div>年龄：{{person.age}}</div>
</div>`
});
注意这个根元素不能是template，它不是真正的元素。
以上就是kano个人技术博客对于vue组件基础的部分简介，下一篇kano将继续介绍vue组件。