组件
初入组件
0 前言
我们这一节学一个VUE提供的一个超级厉害的高级属性，组件。
我们通过一个场景来说明组件的作用。
比如我们现在要制作十个页面，每个页面的组成都如下，
<html>
<!--页头-->
<div>
...
</div>
</html>都有一个页头的div标签，同时内容都相同，那如果我们要实际开发，岂不是要复制十遍代码，重写十遍js逻辑？
现在有了vue就没有这个烦恼了！
我们可以抽取页头这部分的代码出来，单独写成组件，然后每个页面只要调用一下就行，十分方便。
是不是很酷，让我们快速学习一下吧！
1 语法
其实简单来说，就是写两个vue文件，然后在页面调用另一个vue文件的页面就行。
而这个每个vue文件，我们可以称之为“单文件组件”，简称SFC。
我们直接通过示例讲解。
我们先写一个WelcomeWorld.vue文件，最简单的语法页面
<template>
<div>
<h1>Welcome to my World!</h1>
</div>
</template>然后我们在HomeView.vue文件调用
<template>
<div>
<WelcomeWorld />
</div>
</template>
<script setup>
import WelcomeWorld from './WelcomeWorld.vue'
</script>当我们访问HomeVIew.vue页面的时候，效果如下，
可以看到我们通过
import WelcomeWorld from './WelcomeWorld.vue'引用了WelcomeWorld文件，同时把这个页面声明为WelcomeWorld标签，
然后在页面把WelcomeWorld当做标签使用，即
<WelcomeWorld />就可以引用成功了！
这样的话，我们可以快速在多个页面复用我们的相同的代码。
同时，同一个页面也能进行复用。
<template>
<div>
<WelcomeWorld />
<WelcomeWorld />
<WelcomeWorld />
</div>
</template>
<script setup>
import WelcomeWorld from './WelcomeWorld.vue'
</script>
重复调用三次即可。
是不是十分简洁高效！
2 扩展
在 Vue 3 中，组件本质上就是 Vue 实例，但根组件和其他组件的创建方式和作用域有所不同。根组件是整个应用的入口，它被挂载到页面上的一个元素上，并管理整个应用的状态和行为。其他组件是根组件的子组件，它们可能会被多次使用，并且可以嵌套在其他组件中形成组件树。
3 结语
我们又学习了一个高级语法，接下来继续冲！
