卸载 Vue 实例或重新安装到新位置

Posted 2023-02-22

【中文标题】卸载 Vue 实例或重新安装到新位置

【英文标题】：Unmount Vue inistance or remount in a new location

【发布时间】：2018-03-30 21:30:54

【问题描述】：

我正在做一个要添加新功能的项目。该功能使用一个 Vue 实例，该实例被创建为存在于一个页面上。它抓取：window.location.href 并创建包含其他信息的元数据，这些信息可以与其他用户共享。

这现在需要具有相同的共享功能才能存在于动态创建的页面上。我有几行信息，每一行（可以是一行，可以是 100 行）都有一个下拉列表，其中填充了单击框中的信息。在下拉列表中，我需要具有此共享功能。我能够使用shareWidget.$mount('some selector[with a data attribute="active"') 填充Vue 实例的第一行 功能。无论我先点击哪一行，这都很有效。

问题在于，只要我点击另一行 ($('some selector') 就会被删除，并在下拉列表中添加一个新的 $('some selector[with a data attribute="active"'))，该下拉列表现在是活动行的一部分。

我无法使用名为sharingWidget 的Vue 实例填充新的选择器。我试图再次销毁并安装，但我得到了[Vue warn]: $mount() should be called only once.，这是预期的。有没有办法让 Vue 实例移动到新位置或卸载然后重新挂载？

【问题讨论】：

我最近做了类似的事情。我最终做的是将我的数据保存在 Vuex 商店中。然后我销毁了旧实例，并重新安装了一个 new 实例，其数据与前一个实例相同，但位置不同。根据您的应用程序的规模和复杂程度，这可能会也可能不会。您可以将数据全部保存在 Vuex 存储中，然后将该数据缓存在全局变量中。 Vuex 有一个replaceState 方法，您可以使用它来重新植入数据。

如果你能提供一些基本的代码或要点，我可以看看，也许会给你一些想法。

对于那些使用 Vue 3 遇到此问题的人，值得考虑更改 :key，如果您在挂载 name 组件的多个实例时遇到问题，请确保组件上的 'name' 属性是不同的。 :key 的信息在这里：***.com/a/47466574/339803

【参考方案1】：

我不相信这实际上可以做到。 Vue 实例一旦挂载，就无法再次挂载。与组件相反，Vue 实例只能存在于一个地方。我的解决方法是，不是每一行都有一个下拉菜单，而是只存在一个。当我点击平铺时，它会获取活动行并将下拉列表附加到它的底部。所以，正如我所说，卸载和重新安装似乎不是一件事。