nuxt3使用自定义组件

最新推荐文章于 2024-06-20 14:22:18 发布

巨蟹座守护骑士

最新推荐文章于 2024-06-20 14:22:18 发布

阅读量452

点赞数 6

分类专栏： Nuxt3 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_70563937/article/details/137043161

版权

Nuxt3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了在Nuxt3中，由于components文件夹的自动注册规则，如何在pages文件夹下的特定页面中手动注册和使用组件，包括创建组件文件夹、在nuxt.config.ts中注册路径以及页面中导入组件的步骤。

摘要由CSDN通过智能技术生成

说明：nuxt3只有components文件夹里面的页面会自动注册为组件，但是有些单独的页面也需要组件，但是也不是全局的，所以写在pages里面的页面，需要手动注册为组件使用

1.创建组件

在pages里面创建页面文件夹，在那个文件夹里面创建一个主页面和一个组件文件夹，名字自定义

2.注册组件

在 nuxt.config.ts 文件的components缩小里面进行注册

  /** 注册组件 引入组件所在的文件夹 */
  components: [
    { path: '~/pages/courseDetails/components' },
    { path: '~/pages/news/components' },
    { path: '~/components' },
  ],

3.使用组件

在页面直接使用，组件的文件名

<Assess v-if="activeName == 'Assess'" />
<Fans v-if="activeName == 'Fans'" />
<PrivateLetter v-if="activeName == 'PrivateLetter'" />
<SystemNotice v-if="activeName == 'SystemNotice'" />