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

Question

我是 Vue 的新手，我正在尝试几个基本示例来理解该框架。我创建了 2 个单文件组件 navigation.vue 和 pageoptions.vue。我已将它们导入 main.js 文件，我能够成功编译和运行应用程序。但是，尽管我在 index.html（在 "app" 内）中都有两个组件，但只渲染了 1 个组件，即我传递给 [=28= 的 1 ]渲染函数。由于渲染函数不能 return 多个元素，我如何在页面上渲染任何其他组件而不将这 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 文件中有 div 和 id app 作为应用程序的入口点，我的意思是，这里是将安装您的应用程序的位置。

<!--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。希望能帮助到你。

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

How to render multiple vue single file components on a page

render

vue.js

sfc