文章目录
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。
例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
一，组件
1，简介
组件是可重用的 Vue 实例，拥有自己独立的作用域和状态。
组件是 Vue.js 的核心概念之一，将复杂的应用分解为更小的、可维护的部分，每个部分负责单一的功能。
组件可以拥有自己的模板、样式和行为逻辑，这使得它们可以像自定义 HTML 标签一样在页面中使用。
2，全局组件
3.1 组件定义
通过 Vue 的 component 方法来定义一个全局组件。
clike
// 定义全局组件
Vue.component("counter", {
template: '<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
data() {
return {
count: 0
}
}
})这段代码是在 Vue.js 中定义一个名为 "counter" 的全局组件。
这个组件是一个简单的计数器按钮，每当你点击按钮时，它会递增计数值并显示点击次数。
让我们逐行分析这段代码：
javascript
Vue.component("counter", {这一行使用 Vue 的 component 方法来注册一个全局组件。"counter" 是组件的名字，后面跟着一个配置对象，描述了组件的结构和行为。
javascript
template: '<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',template 字段定义了组件的模板，即组件渲染出来的 HTML 结构。
这里的模板是一个 <button> 元素，它包含一个内联的事件处理器 v-on:click="count++"，表示当按钮被点击时，count 变量将增加 1。
此外，按钮的文本中包含了一个 {``{ count }} 插值表达式，它会显示 count 变量的值。
javascript
data() {
return {
count: 0
}
}
})data 函数返回一个对象，其中包含了组件的初始状态。在这个例子中，data 对象包含一个 count 属性，其初始值为 0。count 将作为组件的响应式状态，它的任何变化都会自动反映在模板中。
由于 data 是一个函数而不是一个对象字面量，这意味着每次创建一个新的 "counter" 组件实例时，都将得到一个新的数据对象，从而避免了不同组件实例之间共享状态的问题。
- 组件其实也是一个
Vue实例，在定义时可以指定data、methods、生命周期函数等参数 - 不同的是组件不会与页面的元素绑定，不用指定
el属性。 - 组件渲染需要 html 模板， 使用
template属性指定HTML模板 - 全局组件定义完毕，任何
vue实例都可以直接在HTML中通过组件名称来使用组件了 data必须是一个函数，不是一个对象。
2.2 在html模板中使用
clike
<div>
<counter></counter>
<counter></counter>
<counter></counter>
</div>2.3 效果
从上图可以看到，定义了组件之后，就可以像使用html原生标签一样使用组件，且每个组件都有自己的状态，互不干扰，代码得到了最大程度的复用，可维护性和可读性大大提高。
3，局部组件
3.1 定义
一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着 Vue 的加载而加载。
对于一些并不频繁使用的组件，可以采用局部注册。
先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：
clike
const buttonCounter = {
template: '<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
data() {
return {
count: 0
}
}
};然后在 Vue 对象中使用它：
clike
let app = new Vue({
el: "#app",
components: {
'button-counter': buttonCounter // 将定义的对象注册为组件
}
})- components 就是当前 vue 对象子组件集合。
- 其 key 就是子组件名称
- 其值就是组件对象名
- 效果与刚才的全局注册是类似的，不同的是，这个 counter 组件只能在当前的 Vue 实例中使用
简写：
clike
let app = new Vue({
el: "#app",
components: {
counter // 将定义的对象注册为组件
}
})3.2 在html模板中使用局部组件
clike
<div>
<button-counter></button-counter>
</div>3.3 效果
完整代码
clike
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="count++">我被点击了 {{count}} 次</button>
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
<button-counter></button-counter>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//1、全局声明注册一个组件
Vue.component("counter", {
template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
data() {
return {
count: 1
}
}
});
//2、局部声明一个组件
const buttonCounter = {
template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
data() {
return {
count: 1
}
}
};
new Vue({
el: "#app",
data: {
count: 1
},
components: {
'button-counter': buttonCounter
}
})
</script>
</body>
</html>