将 VueJS 组件的多个实例添加到模板中？答案

【问题标题】：将 VueJS 组件的多个实例添加到模板中？
【发布时间】：2023-03-06 19:39:01
【问题描述】：

我是 VueJS 的新手，想将 card component template 的多个实例添加到 VuetifyJS PWA template。我尝试了什么：

我用卡片模板代码创建了一个News.vue文件。
我向 main.js

新的 Vue({ 埃尔：'#news'，路由器，模板： ''，组件：{新闻} })

我在 index.js 中添加了新闻：

从'vue'导入Vue 从'vue-router'导入路由器导入你好从“@/components/Hello”导入新闻从“@/components/News”

Vue.use(路由器)

导出默认新路由器（{路由：[ { 小路： '/'，名称：'你好'，组件：你好 }, { 小路： '/'，名称：'新闻'，组成部分：新闻 } ] })

将<news></news> 多次添加到 Hello.vue 模板 - 以显示 News.vue 模板内容 - 无效。我做错了什么？

Hello.vue 代码： https://github.com/vuetifyjs/docs/blob/master/examples/layouts/google-contacts.vue

【问题讨论】：

我们需要Hello.vue的代码
另外，您有 2 条路径指向同一个地方，这将在控制台中生成警告。我假设您只想要第一个（默认情况下将使用它），因为 Hello 组件将显示新闻组件。
@webnoob 这是 Hello.vue 中的代码：github.com/vuetifyjs/docs/blob/master/examples/layouts/…
你说你在 Hello.vue 模板中添加了<news></news>。您只是链接了 vuetify 代码，而不是您尝试过的代码。
对不起，这里是：Hello.vue 代码。我只在顶部添加了<news></news> 标签。 <template> <v-app id="inspire"> <news></news> <news></news> <news></news> <v-navigation-drawer fixed clipped app v-model="drawer" > [...] 其他所有代码都与示例中的代码相同：github.com/vuetifyjs/docs/blob/master/examples/layouts/…

标签： vuejs2 vue-component vue-router vuetify.js

【解决方案1】：

要将组件添加到您的Hello.vue，您需要声明它，如下所示：

import News from './path/to/components/News.vue

export default {
  components: {
    News
  }
}

如果组件属性在现有示例中不存在，您显然只需添加它，或者将News 变量添加到现有示例中。根据您提供的链接，您需要添加组件道具 - 我会在 props 属性下方添加。

这将允许您在模板中使用<news></news>，它将呈现您的News 组件的内容。

Vue Docs 中有很多关于声明组件的信息，包括有关如何全局声明的信息，因此您不必声明多个组件。

【讨论】：