07. Nuxt3组件的编写

现在的前端开发，都离不开组件的开发，组件开发的质量也代表着一个前端人员的开发水平。本节我们就看一下 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 的组件使用非常方便，不用重复的不断引入，可以使用在页面中，也可以使用在布局模板中。而且对于书写的名字也有很宽泛的随意性。

以上关于07. Nuxt3组件的编写的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。