经过之前vue基础知识的学习，我们现在终于要学习vue的重点内容了——组件。
组件化开发的好处有很多，代码复用、模块划分清晰、方便协作等，vue中的组件更是企业级开发中的基础。所以初学者一定要熟练掌握vue组件的相关内容。
1.组件化开发
我们在开发网页时，需要把网页的各个部分划分成不同的组件，通过各种组件的组合和套用，形成一个完整的网页，使用官方的图片可以清晰的看到这一点。
比如网页中，可以拆分成大三块，头部，左侧和右侧的组件，左侧的组件又有两个组件组成，右侧的组件里有三个子组件，它们这样形成了图右侧这个树形结构。这些组件最后像图左侧这样的方式组合到一起，形成了一个简单的网页。
组件化开发就是我们把网页拆分成不同的组件，单独去开发每一个组件，最后把它们组合到一起。
那么问题来了，应该怎么样去划分组件？这个问题涉及到很多开发经验，对于初学者来说，我们先记住一条：
一块相同的内容，会在多个地方用到，我们就把这块内容做一个单独的组件。
其他的原则我们以后再说，现在先举个例子：
比如现在有一个项目要做一个简单的企业站，这个网站有首页、产品介绍、关于我们、招聘信息等页面，那么它每个页面顶部都会有一个导航栏，方便点击跳转。那么这个导航栏就是相同的内容，在多个地方用到，那么我们就很有理由把导航栏做成一个组件。
2.创建我们的第一个组件
1）我们像之前的课程里一样，用vue cli创建一个项目,名字叫component_dome，选择vue3版本
vue create component_dome
创建完成后，我们还像以前一样，把没有用的内容先删掉，留下一个纯净的App.vue
<template>
<div></div>
</template>
<script>
// 组件基础
export default {
name: 'App',
}
</script>
<style></style>
2）在src目录下新建一个文件夹，叫做components，我们在工作中一般把公用的组件都放到这个文件里
3）创建组件
需求是做一个计数器组件，计数器开始是0，每次点击都加一
在components下创建一个文件： counter.vue，我们给组件起名字叫counter，它的文件格式是.vue，和App.vue一样，他们的基本格式也是一样的，都是由template、script、style组成，因为他们其实都是组件。
在counter.vue里输入我们基本的vue组件的格式
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
这样我们这个组件的基本代码已经完成了，组件的基本结构也就是这样的，大家要记住。
4）编写组件的代码
这个组件是一个计数器，它首先要有一个数据，来记录数值，开始时候是0
data() {
return {
count: 0,
}
},
增加一个点击的回调事件，在点击后count加一
methods: {
onClick() {
this.count++
},
},
最后我们需要在template中显示count，并且加上回调事件，这样我们这个简单的组件就完成了
<div @click="onClick">我现在的计数是：{{ count }}，点击增加</div>
完整代码是
<template>
<div @click="onClick">我现在的计数是：{{ count }}，点击增加</div>
</template>
<script>
export default {
data() {
return {
count: 0,
}
},
methods: {
onClick() {
this.count++
},
},
}
</script>
<style></style>
5）在App.vue中使用计数组件
使用js原生的import把组件导入进来，在App.vue的script标签顶部，
import counter from './components/counter.vue'
import后面的counter表示我们的组件名称
from后面的 './components/counter.vue'表示我们的组件的路径
如果想对import语法有更多了解，可以学习一下es6 import语法
然后，在App.vue导出的对象中，声明我们要用这个组件
components: {
counter,
},
最后就是使用，在template中写上这个组件就可以了，要使用尖括号的形式，把组件名称counter当做一个html标签来使用
<counter></counter>
App.vue的完整代码是
<template>
<div>
<counter></counter>
</div>
</template>
<script>
import counter from './components/counter.vue'
// 组件基础
export default {
name: 'App',
components: {
counter,
},
}
</script>
<style></style>
使用的时候，简单来说就是分为三步
- 引入
- 声明
- 使用
现在我们第一个组件已经显示出来了，点击它发现计数也能变化了
6）添加样式
现在我们的counter组件就是一串单纯的文字，我们给它稍微添加一点样式
在组件的三大标签template、script、style我们一看就知道，style标签是写样式的
先给div增加一个class
<div @click="onClick" class="counter-btn">我现在的计数是：{{ count }}，点击增加</div>
在style标签中写点样式
<style>
.counter-btn {
display: inline-block;
padding: 10px 20px;
background-color: #ccc;
border-radius: 5px;
cursor: pointer;
}
</style>
完整的代码
<template>
<div @click="onClick" class="counter-btn">
我现在的计数是：{{ count }}，点击增加
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
}
},
methods: {
onClick() {
this.count++
},
},
}
</script>
<style>
.counter-btn {
display: inline-block;
padding: 10px 20px;
background-color: #ccc;
border-radius: 5px;
cursor: pointer;
}
</style>
得到样式：
7）组件的复用
在使用时，只要在template模板里写组件的标签就可以了，比如我们给它来三个counter
<div>
<counter></counter>
<counter></counter>
<counter></counter>
</div>
效果：
这节课我们写了第一个组件，内容虽然有点长，但是还是比较简单的，小伙伴可以自己动手写一下，点一点。
