vue.js - 有没有办法在 DOM 中存储对特定组件的引用？

Question

问题:

我目前正在研究文件树，更具体地说是“选定文件夹”功能。我这样做是为了创建新文件和文件夹的特定目标，而不是根文件夹。 (我在 Electron 中使用 Vue，但这与问题并不相关)

选择发生在点击。由于文件树的性质，我使用递归组件(这限制了我对某些组件的“轻松”访问)。

虽然在后端实现这个是微不足道的，但我的确切问题是，在标记所选文件夹时，说不同的背景颜色或粗体文本(通过绑定(bind)在我的样式表上具有某种相应样式的 id 或类) ，我需要取消标记之前选择的目录。

那么，我如何获得对间接(由于递归组件)子组件的访问权限？

我已经尝试并调查过的内容:

现在，我知道在 JS 中你不能在变量中存储指针或引用(否则这可以通过存储对前一个 DOM 元素的引用来轻松实现)。

我有一些解决方案，但它们真的很乏味而且不是很简单。以前，我必须根据文件系统更新重新呈现(通过重新读取)特定的子目录。我通过从根目录传播子函数调用直到到达需要重新呈现的目录来实现此部分重新呈现。我必须这样做，因为 FS 观察器是在根组件上创建的。

同样，我可以通过取消标记任务来做到这一点。当我选择新文件夹时，我首先传播子函数调用，直到我到达之前选择的文件夹，然后通过取消绑定(bind)样式 ID 来取消标记它。我以前做过这个，我知道这不是一个令人愉快的方法。

因为我可以获得点击事件目标，所以我想知道我是否可以以某种方式存储对先前“选择”的 DOM 元素的任何类型的引用，并在以后需要“取消选择”它时使用该引用。

这是我的文件夹组件的样子。我尝试为属性提供不言自明的名称，但如果有任何混淆，我会回答任何问题。

<folder-comp
          @openFile="openFile"
          v-for="folder of folders" 
          :key="`folder-${folder.shortFolderName}`"
          :folder-name="folder.shortFolderName"
          :ref="folder.shortFolderName"
          :full-folder-path="folder.fullFolderPath"
          :local-directory="recursiveScanDir"
          :indentation-level="indentationLevel + 1">
</folder-comp>

我之前使用的传播方法是必要的，因为我只有一个事件文件系统路径，与我的 Vue 结构无关，所以我需要以某种方式转换遍历该路径。不过，在这里，一切都只发生在 Vue 环境中，所以我认为会有某种方法可以轻松处理这个问题。

编辑:好吧，就像我过去发生的那样，仅仅在 stackoverflow 上写下问题本身就帮助我找到了解决方案。

我在我的 Vue 项目上设置了一个全局事件总线，因此我可以在当前选定的文件夹上绑定(bind)一个事件监听器。单击(因此选择)另一个文件夹后，它会在全局事件总线中发出一个事件，触发先前选择的文件夹。接下来是事件监听器的取消标记和解除绑定(bind)。

虽然这只是一种解决方案，但问题仍然存在。这是一个好的解决方案吗？这种方法有什么缺点吗？有更好的解决方案吗？

Answer 1

除了全局事件总线，您还可以使用状态管理，例如 Vuex。当您更改文件夹时，您只需发送一个操作。这使用命令模式，而不是提到的监听器模式。您也可以选择使此操作异步 或同步。

有多种方法可以在组件内部或外部注册您的监听器/观察器。

使用此架构将使您能够轻松添加撤消/重做功能，并且还能够在您的突变历史中来回导航。

您还可以在浏览器中获得 Vue 工具提供的集成调试功能。

事实上，Vuex 正是为这种情况而构建的，当组件需要相互通信时，父/子 prop/emit/inject 机制开始变得乏味且崩溃。

很有可能一旦开始使用 Vuex，您将永远不会回头。