Vue.js 如何在同一页面中加载不同的组件_Vue.js

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

vue.js

Vue.js 如何在同一页面中加载不同的组件,vue.js,Vue.js,我的应用程序中的每种用户类型都需要有不同的仪表板，因此，目前我的admin vue如下所示： <template> <main id="admin-main"> <header id="admin-dashboard-header" class="jumbotron"> <div> <h1>Job Dashboard</h1>

我的应用程序中的每种用户类型都需要有不同的仪表板，因此，目前我的admin vue如下所示：

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


工作仪表板
工作人员>仪表板

仪表板
公司
作业
候选人

所有组件必须在此加载
h1{
字体大小：50px；
}

理想情况下，每个列表项（公司、职务、候选人）必须加载各自的组件。

例如，当我单击作业列表项时，如何在同一页面中加载作业组件？

一种解决方案是使用动态组件。见：

你可以看到我在这里举的一个例子：

在我的Vue应用程序中，我创建了一个名为

selectedComponent

的数据属性，并定义了一个根据参数设置该属性的方法

setComponent(name) {
  this.selectedComponent = name
}

然后，您可以通过以下方式调用该函数：

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

菜单列表

这就是真正的魔法

<component :is="selectedComponent" />

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

组件标记然后呈现该组件。