我想显示一些任务(例如待办任务)和tasklist,而无需在这些组件之间导航。 (Task和Tasklist都是组件)。但是我找不到动态加载一个组件或另一个组件的正确方法。您可以猜测,当用户单击列表中的项目时,他/她将在同一主要组件中看到详细信息。
在主视图组件中,我做了类似的事情
<template>
<TabView ...>
<GridLayout columns="*" rows="auto,*">
<SegmentedBar row="0" col="0">
<SegmentedBarItem title="Meine Aufträge" />
<SegmentedBarItem title="Auftragspool" />
</SegmentedBar>
<GridLayout row="1">
<component v-for="component in componentsArray"
v-show="component === currentComponent"
:is="component" v-bind:key="component"
@changeComponent="changeValue" />
</GridLayout>
</TabView>
<script>
//...
data() { //...
return {
currentComponent: "ServiceOrderList",componentsArray: ["ServiceOrderList","TaskDetails"]
};
},methods: {
changeValue(payload) {
this.payload = payload
this.currentComponent = "TaskDetails"
}
</script>
// another TabViews
</template>
这是可行的(当我在TaskDetails中放置静态字符串时),但是我无法将有效负载发送到TaskDetails,
但是这种方法不起作用
<v-template if="currentComponent==='ServiceOrderList'">
<ServiceOrderList/>
</v-template>
<v-template if="currentComponent==='TaskDetails'">
<TaskDetails :data="this.payload"/>
</v-template>
那么我还有什么其他方法可以尝试解决这个问题呢? 谢谢