如何在一個頁面上渲染多個vue單文件組件

Question

我是 Vue 的新手，我正在嘗試幾個基本示例來理解該框架。 我創建了 2 個單文件組件navigation.vue和pageoptions.vue 。 我已將它們導入到main.js文件中，並且能夠成功編譯和運行應用程序。 但是，盡管我在index.html （在“應用程序”內）中都有這兩個組件，但只有 1 個組件被渲染，即我傳遞給渲染function 的 1 個組件。 由於渲染 function 無法返回多個元素，如何在頁面上呈現任何其他組件而不將這 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}
})

索引.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-->

瀏覽器中的 Output

導航菜單

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