什么是组件？
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。
实例
首先应该注册，也就是告诉浏览器我新发明了一个元素。
要注册一个全局组件，你可以使用 Vue.component(tagName, options)。例如：
Vue.component('my-component', {
// 选项
})
举个例子
假设及扩展了一个叫做hh的标签
<hh>
</hh>
那么应该如何注册。首先html文本里得有，然后再去注册。利用Vue.component进行注册，然后第一个参数是新创建的标签名，第二个标签时模板或者叫选项。
<style>
.apple {
color:red;
}
</style>
</head>
<body>
<div id="app">
<hh>xx</hh>
</div>
<script>
// 注册
Vue.component('hh', {
template: '<div class="apple">自定义组件!</div>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
结果
image.png
data必须是一个函数
举个例子,如下data不是函数，结果呢？没有内容输出。
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
</div>
<script>
Vue.component('simple-counter', {
template: '<h1>{{message}}</h1>',
data:{
message:'Hello Vue.js!'
}
})
new Vue({
el: '#example-2'
})
</script>
给script中的内容换个写法
<script>
var x={message:'good'}
Vue.component('simple-counter', {
template: '<h1>{{message}}</h1>',
data:function(){
return x
}
})
new Vue({
el: '#example-2'
})
</script>
结果
image.png
也可以这么写.不用首先定义x。结果是一样的。
<script>
Vue.component('simple-counter', {
template: '<h1>{{message}}</h1>',
data:function(){
return {
message:'good'
}
}
})
new Vue({
el: '#example-2'
})
</script>
总之呢，就是必须把data的内容包裹在函数里。
可是为什么这么设计呢？
换个例子来说明
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
</div>
<script>
var data = { counter: 0 }
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
// 但是我们返回给每个组件的实例的却引用了同一个data对象
data: function () {
return data
}
})
new Vue({
el: '#example-2'
})
</script>
结果是。三个按钮数值同步变化
image.png
如何让每个按钮各自变化呢？
只需要把return的内容修改一下
return {
counter:0
}
结果三个按钮内容独自变化
image.png
最终用function实现了该功能，可以想象的是，如果和之前一样采用键值对比较难搞。大致意思如此
未完待续
