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组件相关的知识。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 08. Nuxt3多层级组件、懒加载组件的使用

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们