章节目录：
一、组件简介
二、组件使用
- 代码示例：
<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>
- 效果演示：
