如何在 Nuxt Vue 的单个模板中添加多个组件？

Posted 2023-02-16

【中文标题】如何在 Nuxt Vue 的单个模板中添加多个组件？

【英文标题】：How to add miultiple components in a single template in Nuxt Vue?

【发布时间】：2021-12-25 16:20:13

【问题描述】：

夏天

我尝试创建一些示例 Vue Nuxt SPA。 在一个组件中，我添加了其他两个组件。 结果浏览器上什么也没有显示。

我想知道如何修复它并正确显示输入功能。

我试过的

这是目录结构。

project
  ├ pages
  │  └ index.vue
  ├ components
  │  ├ home
  │  │  └ index.vue
  │  ├ input
  │  │  └ index.vue
  │  └ list
  │     └ index.vue
  .
  .

在components/home/index.vue 中我添加了两个组件：Input 和 List。

<template>
  <div>
    <Input/>
    <List/>
  </div>
</template>

<script lang="ts">
import  Component, Vue  from 'nuxt-property-decorator';
import Input from '~/components/input/index.vue';
import List from '~/components/list/index.vue';

@Component(
  layout: 'default',
  components: 
    Input,
    List,
  ,
)
export default class Home extends Vue 
</script>

因此，浏览器上没有显示任何内容。

显示一些代码

这里是 Github 存储库，请查看。 https://github.com/jpskgc/vue-nuxt-spa-sample/tree/multiple-components

【问题讨论】：

嗨，我的回答有帮助吗？如果有，请点赞/接受。

【参考方案1】：

转到nuxt.config.js，设置为shown here。

export default 
  components: [
    
      path: '~/components', // will get any components nested in let's say /components/test too
      pathPrefix: false,
    ,
  ]

这样，您将获得自动导入组件。然后，您将能够将组件直接重命名为 Home.vue、Input.vue 和 List.vue，并直接在模板中使用它们。

您可以查看此 repo 以了解有关自动导入组件功能的更多详细信息：https://github.com/nuxt/components

阅读这篇文章，更好地解释自动导入的含义：https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components

如果你需要一些关于如何命名和组织你的组件的指南，你可以参考这个：https://vueschool.io/articles/vuejs-tutorials/how-to-structure-a-large-scale-vue-js-application/

【讨论】：

我在nuxt.config.js添加了它，但仍然没有显示...

@jpskgc 我们在这里可能需要minimal reproducible example。

【参考方案2】：

发现是缺少@component注解造成的。

输入/index.vue

<template>
  <v-text-field label="Main input" :rules="rules" hide-details="auto" />
</template>

<script lang="ts">
import  Component, Vue  from 'nuxt-property-decorator';

@Component # <- add it.
export default class Input extends Vue 
</script>

list/index.vue

<template>
  <div>List</div>
</template>

<script lang="ts">
import  Component, Vue  from 'nuxt-property-decorator';

@Component # <- add it
export default class List extends Vue 
</script>

【讨论】：

是的，如果你使用 TS，你确实需要这个。