Question

我的应用程序中的每个用户类型都需要具有不同的仪表板，因此，目前，我的管理提示如下所示：

<template>
    <main id="admin-main">
        <header id="admin-dashboard-header" class="jumbotron">
            <div>
                <h1>Job Dashboard</h1>
                <p>Worker > Dashboard</p>
            </div>
        </header>

        <div class="row container">
            <div class="col-4">
                <ul class="list-group text-center">
                    <li class="list-group-item active">Dashboard</li>
                    <li class="list-group-item">Companies</li>
                    <li class="list-group-item">Jobs</li>
                    <li class="list-group-item">Candidates</li>
                </ul>
            </div>
            <div class="col-8">
                All components must load here
            </div>
        </div>


    </main>
</template>

<style scoped>
h1{
    font-size: 50px;
}
</style>

理想情况下，每个列表项（公司，职位，候选人）都必须加载各自的组件。因此，例如，当我单击作业列表项时如何在同一页面中加载作业组件？

Answer 1

一种解决方案是使用动态组件。参见：https://vuejs.org/v2/guide/components.html#Dynamic-Components

您可以在此看到我的示例：https://codepen.io/bergur/pen/bPEJdB

在我的Vue应用中，我创建了一个名为selectedComponent的数据属性，并定义了一种根据参数设置该属性的方法

setComponent(name) {
  this.selectedComponent = name
}

然后使用类似以下内容的函数来调用该函数：

<button @click="setComponent('menuList')">Menu List</button>

这是真正的魔术

<component :is="selectedComponent" />

所以当我按下按钮时。数据属性selectedComponent获取值为menuList的值，该值是已注册的组件。

然后，component标签会渲染该组件。

如何在同一页面中加载不同的组件

1 个答案: