07. Nuxt3组件的编写

目录
文章目录隐藏
  1. Nuxt3 中创建一个组件
  2. 在布局模板中使用组件
  3. 组件名称的约定
  4. 结语

现在的前端开发,都离不开组件的开发,组件开发的质量也代表着一个前端人员的开发水平。本节我们就看一下 Nuxt3 中的组件编写。

Nuxt3 中创建一个组件

Nuxt3 的所有自定义组件,必须写在 components 目录下,写在这个目录下他会自动加载到页面中,而不用我们自己不断的重复引入到每个页面中。

比如现在要创建一个<TheFooter/> 的组件,我们在项目跟目录建立一个文件夹 components,然后建立一个文件 TheFooter.vue。

//目录结构
-|components
----|TheFooter.vue

然后在 vscode 中打开文件,编写下面的代码:

<template>
  <h1>The Footer Box</h1>
</template>

这段代码只有一个<h1> 标签,在页面中显示出了 The Footer Box 。写好组件后,你可以到任何的页面(page)中进行使用。比如在首页使用他们。 打开/pages/Index.vue页面,然后在最下面加入这个组件。

<template>
  <NuxtLayout name="default">
    <template #one>
      <div class="">
        <h1>Index Page</h1>
        <NuxtLink to="/demo1">Demo1.vue</NuxtLink> <br />
        <NuxtLink to="/goods-mybj/demo2-38">Demo2.vue</NuxtLink><br />
        <NuxtLink to="/parent/child">/parent/child</NuxtLink><br />
        <NuxtLink to="/parent/two">/parent/two</NuxtLink><br />
      </div>
    </template>
    <template #two>
      <div>我是 two 中的内容</div>
      <TheFooter />
    </template>
  </NuxtLayout>
</template>

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

<style scoped></style>

这时候你到浏览器中就可以看到我们刚写的<TheFooter/>组件起作用了。

在布局模板中使用组件

底部,其实是每个页面都需要包括的组件,拿我们可以直接把这个组件放到`布局模板`里是非常合适的选择。在布局模板中使用组件和在普通页面中使用组件没有太大的差别,直接使用就可以了。
这里我们就在\layouts\default.vue布局模板中使用。

<template>
  <div>
    我是布局模板,default.vue
    <slot name="one" />
    ---------<br />
    <slot name="two" />
    <TheFooter />
  </div>
</template>

这时候每个使用了 default.vue 这个布局模板的页面就会有<TheFooter />这个组件的存在了。

组件名称的约定

我说了很多会了 Nuxt3 是约定大于配置的开发模式,所以我们要了解 Nuxt3 框架对于组件名字的约定。比如按照以前的经验,这个<TheFooter/>组件,习惯写成 <the-footer /> 我们测试一下,如果你这样写在页面里也是生效的。

/layouts/default.vue
<template>
  <div>
    我是布局模板,default.vue
    <slot name="one" />
    ---------<br />
    <slot name="two" />
    <TheFooter />
    <the-footer />
  </div>
</template>

但是个人建议,你尽量使用大写,因为这样可以区分那些是自定义组件,那些是原生的 HTML 标签。

我说了这是个人建议,但不是必须的。你也可以编写一个 the-header.vue 的组件,然后用 <the-header/> 的形式使用这个组件也是完全可以的。例如下面的两端代码。 在/components文件夹下面,新建一个页面 the-header.vue

<template>
  <h1>The Header Box</h1>
</template>

然后回到 layouts 文件夹下的 defalut.vue 下使用。

<template>
  <div>
    <the-header />
    我是布局模板,default.vue
    <slot name="one" />
    ---------<br />
    <slot name="two" />
    <TheFooter />
    <the-footer />
  </div>
</template>

也是完全可以使用的。由此看来 Nuxt3 对于组件的使用还是非常方便的,你只要符合自己的习惯就好。

结语

本文主要简单学习了 Nuxt3 中组件的创建和使用方法。从学习中可以知道 Nuxt3 的组件使用非常方便,不用重复的不断引入,可以使用在页面中,也可以使用在布局模板中。而且对于书写的名字也有很宽泛的随意性。

「点点赞赏,手留余香」

1

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

微信微信 支付宝支付宝

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

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 07. Nuxt3组件的编写

发表回复