0

我是 Vue 的新手，我正在尝试几个基本示例来理解该框架。我创建了 2 个单文件组件navigation.vue和pageoptions.vue。我已将它们导入到main.js文件中，并且能够成功编译和运行应用程序。然而，虽然我在index.html中（“app”内）有两个组件，但只有 1 个组件被渲染，即我传递给渲染函数的 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>

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-->

在浏览器中输出

导航菜单

4

2 回答 2

0

这不是渲染组件的方式，首先，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 文件夹内，你可以使用任何文件夹结构，但请记住，您的应用程序只有一个挂载点。

于 2020-06-07T07:49:42.787 回答
0

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

于 2020-06-07T11:13:34.667 回答