首页 文章

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

提问于
浏览 次
0

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

  • 我使用卡片模板代码创建了一个 News.vue 文件 .

  • 我在 main.js 添加了一个新的Vue实例

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

  • 我将 News 添加到 index.js ：

从'vue'导入Vue导入路由器从'vue-router'导入Hello来自'@ / components / Hello'import新闻来自'@ / components / News'Vue.use（路由器）导出默认新路由器（{routes：[ {path：'/'，name：'Hello'，component：Hello}，{path：'/'，name：'News'，component：News}]}）

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

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

vuejs2 vue-component vue-router vuetify.js

1 回答

  • 1

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

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

export default {
  components: {
    News
  }
}

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

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

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

    回复于

相关问题