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

Question

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

1. 我使用卡片模板代码创建了 News.vue 文件。

2. 我在 main.js

中添加了新的Vue实例

  

new Vue（{         el：'＃news'，         路由器，         模板：''，         组件：{新闻}       }）

1. 我将新闻添加到 index.js ：

  

从'vue'导入Vue导入路由器从'vue-router'导入Hello   来自'@ / components / Hello'导入来自'@ / components / News'的新闻

     

Vue.use（路由器）

     

导出默认新路由器（{routes：[       {         路径：'/'，         名称：'你好'，         组件：您好       }，       {         路径：'/'，         名称：'新闻'，         组件：新闻       }]}）

多次向 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
  }
}

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

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

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