Question

我使用单个文件组件编写了一些视图组件。

有一个主组件将具有一个制表符控件，该控件应在其他组件之间切换。我希望所有标签在您切换时保持有效，以便您回来。此外，某些选项卡应包含相同的组件，但将显示不同的数据。标签页的数量应该是动态的，因为页面的输入数据将导致它跨越更多标签页。

我知道vue提供了一个可切换的组件，并且还提供了keep-alive标签来维持组件的状态，因此我有如下代码：

<keep-alive>
   <component v-bind:is="currentTabComponent"></component>
</keep-alive>

在vue代码中，我设置了一个带有一些默认选项卡的数组，稍后将其添加到其中，以及一个返回currentTabComponent并填充屏幕的函数

import Home from './components/Home.vue';
import MessageLog from './components/MessageLog.vue';

components: {
            Home,
            MessageLog
},
data: function () {
    return {
        selectedTab: 0,
        currentTab: "Home",
        tabs: ['Home', 'MessageLog'],
        tabComponents: new Map([["Home", Home], ["MessageLog", MessageLog]])
    }
},
computed: {
    currentTabComponent: function () {
        this.currentTab = this.tabs[this.selectedTab];
        return this.tabComponents.get(this.currentTab);
},
methods: {
    testTab: function () {
        this.tabs.push("nextTab");
        import('./components/MessageLog.vue').then(
            result =>
            {
                result.default.name = "nextTab";
                this.tabComponents.set("nextTab", result.default);
            }
        );
    }
}

理想情况下，我应该能够调用testTab并让它加载INDEPENDENT组件并切换到它并使用它。

发生的所有这些代码都起作用了，但是当打开新选项卡时，即使该组件是在测试选项卡功能中完全单独加载的，它也会与现有的MessageLog选项卡共享状态！我在消息日志组件上有一个测试按钮，该按钮可以添加更多消息，并且随着消息的添加，并且您在两个选项卡之间使用MessageLog组件进行交换时，消息都是相同的。

使用<keep-alive>选项是否有此错误？

这仅仅是一个糟糕的设计吗？

目标是创建标签后，我可以向其中注入一些ID（此处未显示）。然后，我们有了该标签的新数据，我可以发出带有其ID的消息-然后它可以抓取该消息并执行显示新数据所需的所有操作。

如何在动态组件标签内的vue中重用组件？

0 个答案: