一、前言
vue语法的内容，通过前面两章的学习已经差不多了，所以本章开始学习vue中另一个非常重要的部分：组件。
因为前面章节主要vue语法特性特性的缘故，为了减轻大家的认知负担、我都尽可能的只在一个叫做App.vue文件中完成的。
而这种以.vue结尾的文件，在vue中被称为组件，并且这个App.vue是整个vue项目的根组件，
之所以App.vue为根组件，是因为我们的入口js文件中用的它来创建整个vue实例：
虽然你也可以改为其它的，但一般情况下都是直接默认即可。
二、组件基础
这部分内容你也可以对照官方文档查看组件基础，正如官方所说，组件的基本作用其实就是复用。
比如下图这个由官网提供的图片示例：
左边就是一个基本的页面样式，并抽象出了右边的代码结构。
Root便代表了我们整个页面，并且Root可以由三部分组成：Header、Main、Aside。
然后这三个又可以继续由其它部分组成，成为一种树形的嵌套结构。
vue组件的基本思想就是，能不能将这结构上的每一个结点都抽象成为一个组件。
比如这里的Header，即页头嘛，你可能很多页面都会用到，甚至其它项目也能用到。
如果能把它抽象成为一个组件，那么其它任何地方只要想用，直接将这个组件复制、引入进项目中即可。
这就完成了代码的复用！
而且最重要的是，vue中一个组件包含了html、js、css这三个部分，所以即使你引入到其它项目中，也是可以直接使用的，而无需额外调整。
而传统的复用方式很多都是三种代码分开存放，这就导致即使你引入，想要复用大多数时候也都还需要继续调整才行。
理解了组件的基本来历与用途，下面我们就来看看怎么用。
正如前面所说，一个组件就是一个.vue结尾的文件，官方常称其为“单文件组件”（SFC，Single File Component）。
一般我们都会将组件创建在这个components文件夹下：
然后在这个组件中写好三个基本的标签即可。
紧接着我们就可以在这个组件中写一些比较通用的功能了，比如可以写一个好看点的按钮组件：
<template>
<div class="Button">
<button @click="btn_click">按钮组件</button>
</div>
</template>
<script setup>
function btn_click() {
window.alert('你点击了按钮');
}
</script>
<style scoped>
.Button button {
border: none;
border-radius: 5px;
cursor: pointer;
}
.Button button:hover {
background-color: #ccc;
}
</style>
这个组件很简单，就是封装了一个按钮而已，并且所有与按钮相关的东西：html、css、js代码都在这个文件中了。
然后，如果我们想要使用这个组件，那就在你想要用的地方，将它导入使用即可：
比如上面，我们就是在根组件中导入了这个组件，并使用。
导入的方式一般都是通过文件名进行导入的，比如这里我的文件名为Hello.vue,所以导入名就为Hello，而导入的路径，这里写的是相对路径。
.代表当前文件所在路径，因为components文件夹与App.vue文件在同一层目录下。
而使用的方式，就和正常标签一样用就行了，是不是很简单好用？
按钮比较简单，大家自己实现一个可能也并不费劲，可如果是一个选日期的组件呢？
这种复杂的组件，如果你没有一定的前端功底，恐怕是很难写出来的，即使能写，也得费很大劲了。
而别人现在就是用vue组件的方式将其封装了起来，我们如果想要用，直接将其引入即可！
目前前端用的比较多的是Element界面库，它基本涵盖了所有前端开发的库，除却需要高度自定义的组件的公司会自己研发一套外，很多公司都使用的这套界面库。。
三、注册
正常来说，我们如果想要使用一个组件，那么是需要先进行注册的。
比如前面的Hello组件，以前可能需要像下面这样写才能用：
即在没有setup属性的script中，你需要自己将这个组件通过一个叫做components属性的对象注册一下，才能被使用。
只不过由于官方既然已经给出了setup的语法糖，那么也没必要写这些东西了，看着就很麻烦：
这是局部注册的方式，也就是你在什么时候需要、在哪个组件里面需要，就在这个组件里面去注册使用即可。
这也是我们用的最多的方式，但官方也提供了一个叫做全局注册的方式：
方法就是在一个组件中进行注册，那么此时项目中任何该组件的子组件包括其本身，都能直接使用这个组件，而无需每次都使用import语句导入才能使用。
因为我们现在是组合式编程，所以需要导入一个createApp的函数，调用它来得到当前整个项目的示例（或者说是应用，一个应用由许多组件组成）。
然后再调用其上的component函数来进行全局注册，它有两个参数，第一个就是注册的组件名，第二个是这个组件的代码（实例）。
使用方式如上图，一般两个名字我们都是取相同的。
此时，假设我们这个App根组件中又使用了另外一个叫做Test2的组件。
这个Test2组件现在想要使用test组件，那么就可以直接使用即可，而无需再进行导入了，因为它已经进行了全局注册。
不过老实说，这种用法比较少，官方文档可以参考这里：注册
四、Props
作为组件，尤其是想要通用化的组件，写死肯定是不行的。
以上面我们封装的那个按钮组件为例，按钮上面的字你不能写死吧？难不成别人使用你的组件时，还要亲自动手来修改你的源码？
而这就是我们这里要聊的Props了，它的作用就是给组件传值的：
首先第一步就是使用函数defineProps定义一个数组，而数组中的内容就是你想要传递进来的变量名称。
然后第二部，我们就可以通过这个函数的返回值来使用外面传递进来的变量了，比如这里的props.text就是直接通过文本插值的方式显示该变量名。
最后就是使用的第三步，向该组件传递参数，方式也很简单，和普通标签一样直接填属性名即可，比如这里是我们自定义的text属性。
如果你想要传递进去响应式的变量，那也和前面章节提到的属性绑定使用方式一样，前面添加一个英文冒号即可：
此刻如果你动态更改变量btn_test的值，按钮上的文字同样也会跟着变。
这就是它最常见的用法，同时注意，它是单向的，因此由props传递进来的值，组件内部是不能进行修改的，而只能这样使用它。
