本节我们来学习 Nuxt3 中的组件的使用，上节已经对最初级的组件有了基本认识。本节我们将学习两个知识点：
- 多层级组件的引用方法
- 组件的懒加载
多层级组件的引用
多层级组件看似好像很复杂，也可能是我表述的不对，其实多层级组件就是把一个组件放在一个文件夹里。在实际工作中组件会非常多，所以会把组件分门别类的放置。那这种有层级的组件，我们要如何引用呢？
比如在 components 文件夹下面，新建一个 test 文件夹，然后在 test 文件夹下面再创建一个 MyButton.vue 文件。内容如下：
<template>
<div ><button>MyButton</button></div>
</template>
<script setup>
import {} from "vue";
</script>
<style scoped></style>
写完这个组件后，最关键的一步，就是在页面里如何引用到这个组件。方法很简单，只要在这个页面的前面加上文件夹的名称就可以了。我们的目录结构如下：
--|components ----|test ------|MyButton.vue
那引用组件的方法就是这样的：
<TestMyButton />
如果有很多层级，我们也依照这个规律，加入前缀就可以实现多层级组件的引用了。
这种设计的目的是让框架可以应对复杂项目和多组件的需求，让我们的组件更加有条例。
组件的懒加载
如果在组件名前面加上Lazy前缀，则可以按需懒加载该组件。懒加载组件的目的是在项目打包的时候包更小。简单理解可以理解为只有在组件显示在页面上时才进行加载。 比如我们现在要做一个文本，这个文本只有在 show 的值为 true 的时候才会显示，然后其他时候他不显示。
<lazyText v-if="show" />
这时候我们就可以使用懒加载组件。如果不总是需要该组件，这将特别有用。
在 components 文件夹下，新建一个 LazyText.vue 的文件，然后编写代码如下。
<template>
<div >Lazy Text Content</div>
</template>
<script setup>
import {} from "vue";
</script>
<style scoped></style>
有了组件之后，我们在新建一个页面 demo2.vue，然后用一个按钮来控制这个组件的显示和隐藏。
<template>
<div >
<lazyText v-if="show" />
<button @click="handleClick">显示/隐藏</button>
</div>
</template>
<script setup>
import { ref } from "vue";
const show = ref(false);
const handleClick = () => {
show.value = show.value ? false : true;
};
</script>
<style scoped></style>
然后到浏览器看一下效果，这种就是懒加载组件的使用。这种组件也可以用来优化页面的打开速度，比如你有一个几百行的长列表。直接加载会给服务器造成很大压力，如果在其他内容已经完成后，过 1-2 秒再加载这个长列表，就会给用户很好的体验。也会减少服务器的压力。
组件相关的内容还是挺多的，所以我们下节还是学习 Nuxt3 组件相关的知识。