Nuxt3 -- 组件 Components

相信大家在写组件的时候各种导入和注册操作重复去写肯定很烦，这点 Nuxt 中已经帮我们解决了，直接使用就行了。

自动导入组件

我们把Vue组件放在components/目录，这些组件可以被用在页面和其他组件中，以往我们使用这些组件需要导入并注册它们，但Nuxt会自动导入components/目录中的任意组件。比如：

| components/
--| TheHeader.vue
--| TheFooter.vue

layouts/default.vue:

<template><div><TheHeader /><slot /><TheFooter /></div>
</template>

组件名称约定

没有嵌套的组件会以文件名直接导入，但如果存在嵌套关系哪？例如下面的路径：

| components/
--| base/
----| foo/
------| Button.vue

那么组件名称将会基于路径和文件名连起来，比如上面的base/foo/Button.vue注册名称将会是BaseFooButton，将来用起来会像下面这样：

<BaseFooButton />

组件懒加载

如果在组件名前面加上Lazy前缀，则可以按需懒加载该组件，可用于优化打包尺寸。

比如，下面的用法：

<template><div><h1>Mountains</h1><LazyMountainsList v-if="show" /><button v-if="!show" @click="show = true">显示列表</button></div>
</template><script setup>import {ref} from 'vue'const show = ref(false)
</script>

想学习的同学可以去B站搜 young村长有配套的Nuxt3学习视频和Vue3相关视频学习我最近在跟着学习有兴趣可以去看看

Nuxt3 -- 组件 Components相关推荐

vue的组件components基础和安装vue脚手架
组件组件在vue是一个很强大的功能,可以对HTML进行扩展,在大型应用中,可以对一些抽象的功能进行封装作用:可复用的vue实例组件注册局部注册组件 new Vue({ el: comp ...
我对组件components 和页面 views 的思考
之前做过很多项目,我喜欢把组件放到components目录中.页面入口文件放到views中,但哪些文件需要放到components中,哪些文件需要放到views中呢,我现在发现,在自己做很多个项目时, ...
vue中定义组件 components（局部 / 全局）
1. 基本信息组件是对你 html 标签的一个拓展组件里面的内容就是你模板的内容组件分为全局组件和局部组件对象当中定义的组件都是局部组件 2. 如何定义(注册)组件定义组件需要使用compo ...
vue的组件 components
一.组件组成组成:html +Js+css 模板: <template><div > </div> </template> <script> ...
Vue中components几个组件
一.组件(components),意义以及对它的理解? 组件:一个小的功能分区: 意义:复杂项目拆分简单的组件,让团队开发更高效,组件是可以重复使用的模块: 理解:组件其实就是个小的vue,具有dat ...
RaSa2.5.x配置之二：管道组件(Pipeline Components)
目录语言模型(Language Models) MitieNLP SpacyNLP HFTransformersNLP 分词器(Tokenizers) WhitespaceTokenizer Jie ...
vue 知识点整理——组件（components）
定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...
第三天：Vue的组件化
1.认识组件化我们将一个完整的页面分成很多个组件,每个组件都用于实现页面的一个功能块,而每一个组件又可以进行细分. 组件化是Vuejs中的重要思想,它提供了一种抽象,让我们可以开发出一个个独立可复用 ...
vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别
组件实现局部功能的代码和资源的集合非单文件组件 1.定义组件(创建组件) 2.注册组件 3.使用组件(写组件标签) 定义使用Vue.extend(options)创建,其中options和new ...

Nuxt3 -- 组件 Components

自动导入组件

组件名称约定

组件懒加载

Nuxt3 -- 组件 Components相关推荐

最新文章

热门文章