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

Question

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

我用卡片模板代码创建了一个 News.vue 文件。
我添加了一个新的 Vue 实例到 main.js

new Vue({ el: '#news', router, template: '', components: { News } })

我添加了新闻到index.js:

import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import News from '@/components/News'

Vue.use(Router)

export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello }, { path: '/', name: 'News', component: News } ] })

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

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

Answer 1

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

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

export default {
  components: {
    News
  }
}

如果现有示例中不存在 component 道具，您显然只需添加它；如果存在，则将 News 变量添加到现有示例中。根据您提供的 link，您将需要添加组件道具 - 我会在 props 属性.

下面添加

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

Vue Docs 中有很多关于声明组件的信息，包括关于如何全局声明的信息，这样您就不必在多个组件上声明。

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

Add multiple instances of a VueJS component to a template?

vue-router

vue-component

vuejs2

vuetify.js