Question

我想显示一些任务（例如待办任务）和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>

那么我还有什么其他方法可以尝试解决这个问题呢？谢谢

Answer 1

完成此类操作后，我将诸如changeValue（component）之类的组件传递给changeValue。控制台注销后，有效载荷是您期望的吗？

此外，您的sudo代码中的这一点也让我有些困惑

</script>
  // another TabViews
</template>

这不是您编写组件的方式吗？我对单个文件组件的理解是，它们具有一个模板和一个脚本标签？

使用v-if和v-else动态更改nativescript-vue中的组件

1 个答案: