08. Nuxt3多层级组件、懒加载组件的使用

本节我们来学习 Nuxt3 中的组件的使用，上节已经对最初级的组件有了基本认识。本节我们将学习两个知识点：

• 多层级组件的引用方法
• 组件的懒加载

多层级组件的引用

多层级组件看似好像很复杂，也可能是我表述的不对，其实多层级组件就是把一个组件放在一个文件夹里。在实际工作中组件会非常多，所以会把组件分门别类的放置。那这种有层级的组件，我们要如何引用呢？

比如在 components 文件夹下面，新建一个  test 文件夹，然后在 test 文件夹下面再创建一个  MyButton.vue 文件。内容如下：

<template>
  <div class=""><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 class="">Lazy Text Content</div>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>

有了组件之后，我们在新建一个页面 demo2.vue，然后用一个按钮来控制这个组件的显示和隐藏。

<template>
  <div class="">
    <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 组件相关的知识。