什么是vue的组件（what）?
组件(Component)是vue.js中很强大的一个功能，可以将一些可重用的代码进行封重用。所有的 Vue 组件同时也是 Vue 的实例，可以接受使用相同的选项对象和提供相同的生命周期钩子。
一句话概括：组件就是可以扩展HTML元素，封装可重用的HTML代码，可以将组件看作自定义的HTML元素。
如何使用组件（how）?
- 前提条件: 使用组件名的时候是需要先实例化Vue的，因为组件现在是扩展在Vue中，想使用Vue中的组件就需要先实例化获得这个组件才能够使用
- 创建组件
创建组件即在Vue构造函数中通过extend()方法添加该组件（ps：可以理解成在刚开学的时候，老师不认识你，但是知道有泡泡这个人）
- 注册组件
注册组件即在Vue构造函数中通过一个属性名与之关联在一起，有点像var name='paopao';这个时候 temp就是泡泡了（ps：这个时候老师把花名册上的'泡泡'和人对应起来了） 组件的注册可分为全局注册与局部注册，区别：注册的地方不一致；全局注册就是只要是实例化Vue的范围都可以使用该组件，局部注册就是只能在某一个Vue实例的范围内使用该组件
- 全局注册（使用 Vue.component(tagName, options)）
//使用组件
< div id="app">
< my-component>< /my-component>
< /div>
//确保在初始化根实例之前注册组件
Vue.component('my-component', {
template: '< div> component test! < /div>'
})
// 创建根实例
new Vue({
el: '#app',
components: { App },
template: ''
})
最终渲染为：
< div id="app">
< div>component test!< /div>
< /div>
- 局部注册
每个组件都注册到全局的方式显然很不合理，更多的时候采用的往往是局部注册的方式。可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件
var Child = {
template: '< div>一个局部注册的组件!< /div>'
}
new Vue({
components: {
// < localRegistration> 只在父组件模板中才可用
'localRegistration': Child
}
})
- 使用组件
这个时候就可以在dom中添加所创建的组件名（这个时候你终于可以以'泡泡'的名义去做点什么事了，比如上课，去图书馆等）
Dom模版解析事项
当使用 DOM 作为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。要特别注意的是，像 < ul>、< ol>、< table>、< select> 这样的元素里允许包含的元素有限制，而另一些像 < option> 这样的元素只能出现在某些特定元素的内部。
例如(< my-row>为自定义的组件)：
< table>
< my-row>< /my-row>
< /table>
此时的自定义组件 < my-row> 被当作无效的内容，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。而此时的table标签还没有被解析，所以在往里面放入自定义组件的时候会导致错误的渲染结果。此时的解决方法是可以使用特殊的 is 特性：
< table>
< tr is="my-row">
< /table>
!!! 如果使用来自以下来源之一的字符串模板，则没有此限制:
- < script type="text/x-template">
- JavaScript 内联模板字符串 (通过内联的方式使其一同进行加载)
- .vue 组件
例如：
new Vue({
el: '#app',
components:{
'selectcomp':{
template: ' < select> < optioncomp>< /optioncomp>< /select>'
}
}
})
Vue 实例时传入的选项中data 必须是函数
如果这样的写法：
data: {
msg: 'Welcome to Your Vue.js App'
}
将会报错：
//Vue 会停止运行，并在控制台发出警告，告诉你在组件实例中 data 必须是一个函数。
[HMR] Waiting for update signal from WDS...
vue.esm.js?efeb:591 [Vue warn]: The "data" option should be a function that
returns a per-instance value in component definitions.
举个例子来对比一下：
< div id="example">
< simple-counter>< /simple-counter>
< simple-counter>< /simple-counter>
< simple-counter>< /simple-counter>
var data = { counter: 0 }
Vue.component('simple-counter', {
template: '< button v-on:click="counter += 1">{{ counter }}< /button>',
// data 的确是一个函数了，因此 Vue 不会警告，
// 但是我们却给每个组件实例返回了同一个对象的引用(此处是为了做对比)
data: function () {
return data
}
})
new Vue({
el: '#example'
})
现在的结果是有三个可以计数的按钮，但是不论点击的是哪一个，所有的按钮的所记数都会加1，因为每个组件实例返回的是同一个对象的引用，不论哪个按钮的对数据进行操作，都会影响到其他的按钮组件计数结果
//将其data的格式写成如下，此时每个 counter 都有自己内部的状态了，都是独立存在的，
每个组件返回的都是全新的数据对象：
data: function () {
return {
counter: 0
}
}
下一篇：组件间的数据传递
