Question

我是Vue的新手，我正在尝试几个基本示例来了解该框架。我创建了2个单个文件组件 navigation.vue 和 pageoptions.vue 。我已将它们导入到 main.js 文件中，并且能够成功编译并运行该应用程序。但是，尽管我在 index.html 中都包含了这两个组件（在“ app”内部），但是仅呈现了1个组件，即我传递给 render 函数的1个组件。由于render函数无法返回多个元素，因此如何在不将这2个组件合并为1个父组件的情况下获取页面上的任何其他组件？如果不支持此功能，那么解决此情况的方法是什么？我在哪里错了？

组件1-navigation.vue

<template>
    <div>Navigation Menu</div>
</template>

<script>
    export default {
        name: 'navigation',
        data () {
            return {
            }
        }
    }
</script>

组件2-pageoptions.vue

<template>
    <div>Page Options</div>
</template>

<script>
    export default {
        name: 'pageoptions',
        data () {
            return {
            }
        }
    }
</script>

main.js文件

import Vue from 'vue'
import navigation from './components/navigation.vue'
import pageoptions from './components/pageoptions.vue'

new Vue({
    el: '#app',
    render: (element => element(navigation)),//this will render only navigation component. How to render pageoptions too in this call?
    components: {navigation,pageoptions}
})

index.html

<!--html, head, body etc-->
<div id="app">
    <div style="background-color:teal;">
        <navigation></navigation>
    </div>

    <div style="background-color:silver">
        <pageoptions></pageoptions>
    </div>
</div>
<!--html, head, body etc-->

在浏览器中输出

导航菜单

Answer 1

这不是呈现组件的方法，首先，index.html文件具有带有id app的div作为应用程序的入口点，我的意思是，这是安装应用程序的点。

<!--html, head, body etc-->
<div id="app">
</div>
<!--html, head, body etc-->

这样很好。

现在我们需要一个基本组件，默认示例包含App.vue文件，因此在main.js中，我们拥有：

// main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>',
  render: h => h(App)
});

现在在App.vue组件中，您可以使用您的组件：

// App.vue
<template>
  <div>
    <div style="background-color:teal;">
      <navigation></navigation>
    </div>

    <div style="background-color:silver">
      <page-options></page-options>
    </div>
  </div>
</template>
<script>
import Navigation from './components/navigation.vue'
import PageOptions from './components/pageoptions.vue'
export default {
  components: {
    Navigation,
    PageOptions,
  }
}
</script>

就完成了。

您可以使用index.html文件导入库（npm无法安装的库），但是请尽量不要使用它来添加功能，您的组件必须位于src文件夹中，您可以使用任何文件夹结构，但请记住，您的应用程序只有一个挂载点。

Answer 2

您必须呈现App主组件的主要元素。通常，它的ID为#app，但是创建vue应用程序时会自动生成vue应用程序模板和格式，所以我想您知道这些知识。我认为您需要了解Vue应用程序的工作方式。我本人还是一个新手，但据我所知，您可以在主应用程序的主元素中渲染任何内容，并且将不同的视图嵌套在其中，并且将不同的组件嵌套在视图中。因此，在任何时候，您都在渲染主el（通常使用ID #app），并且在其中更改显示在其顶部的组件。例如，您有一个People组件，以及PeopleList和SideBar组件。您希望有一个关于人员的选项卡，该选项卡（我们的人员组件）中包含人员列表和侧边栏；在这里，您可以在主元素内的App组件中渲染People组件，在People组件内部，您将嵌套PeopleList和SideBar。希望能帮助到你。

如何在页面上呈现多个vue单个文件组件

2 个答案: