如何在一个页面上渲染多个vue单文件组件

Question

我是 Vue 的新手，我正在尝试几个基本示例来了解该框架。我创建了 2 个单文件组件 navigation.vue 和 pageoptions.vue。我已将它们导入到 ma​​in.js 文件中，并且能够成功编译和运行应用程序。但是，尽管我在 index.html （“app”内）中都有两个组件，但只有 1 个组件被渲染，即我传递给 render 函数的 1 个组件。由于渲染函数不能返回多个元素，我如何在页面上渲染任何其他组件而不将这 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>

ma​​in.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 组件的主要元素。它通常带有 #app 的 id，但是当您创建 vue 应用程序时会自动生成 vue 应用程序模板和格式，所以我想您知道这些东西。我认为您需要了解 vue 应用程序的工作原理。 我自己有点新手，但据我所知，您在主应用程序的主要元素中渲染任何内容，并且不同的视图嵌套在其中，并且不同的组件将嵌套在视图中。所以在任何时候你都在渲染你的主 el（通常带有#app 的 id），并且在其中它正在更改显示在它上面的组件。 例如，您有一个 People 组件，以及 PeopleList 和 SideBar 组件。您希望在该选项卡（我们的人员组件）内有一个关于人员的选项卡，包含人员列表和侧边栏；在这里，您在 App 组件中渲染 People 组件在主元素内，而在 People 组件内，您将嵌套 PeopleList 和 SideBar。 希望能帮助到你。