一、组件简介
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。
例如可能会有相同的头部导航。 但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
在
vue里，所有的vue实例都是组件。通常一个应用会以一棵嵌套的组件树的形式来组织（如图所示）：
二、组件使用
- 代码示例：
<body>
<div id="app">
<!-- 使用全局组件。 -->
<br />
<global-button-counter></global-button-counter><br /><br />
<!-- 复用组件。 -->
<global-button-counter></global-button-counter><br /><br />
<!-- 使用局部组件。 -->
<local-button-counter></local-button-counter><br /><br />
</div>
<script>
/*
1. 通过Vue.component()定义一个全局组件（参数一：组件名，参数二：组件参数。）。
*/
Vue.component(`global-button-counter`, {
template: `<button v-on:click="count++"> 全局组件: 点击了{{count}}次 </button>`,
// 一个组件的 data() 选项必须是一个函数。
data() {
return {
count: 0
}
}
});
/*
2. 定义一个局部组件。
*/
const localButtonCounter = {
template: `<button v-on:click="count++"> 局部组件：点击了{{count}}次 </button>`,
data() {
return {
count: 0
}
}
}
/*
3. 创建vue实例。
*/
var app = new Vue({
el: "#app",
// 通过components属性使用局部组件。
components: {
// 组件名: 组件对象
"local-button-counter": localButtonCounter
}
});
</script>
</body>
- 效果演示：
三、组件总结及注意事项
组件其实也是一个
Vue实例，因此它在定义时也会接收：data、methods、生命周期函 数等。不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有
el属性。 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板。全局组件定义完毕，任何
vue实例都可以直接在HTML中通过组件名称来使用组件了。
data()必须是一个函数，不再是一个对象。
四、结束语
“-------怕什么真理无穷,进一寸有一寸的欢喜。”
微信公众号搜索：饺子泡牛奶。
