有没有办法存储对DOM中特定组件的引用?

时间:2019-04-26 22:41:08

标签: vue.js vuejs2 vue-component

问题:

我目前正在处理文件树,更具体地说是“选择的文件夹”功能。我这样做是为了有一个特定的目标来创建新文件和文件夹,而不是根文件夹。 (我在Electron中使用Vue,但这与问题无关)

点击即可进行选择。由于文件树的性质,我使用递归组件(这限制了我对某些组件的“轻松”访问)。

虽然在后端实现这一目标很简单,但我的确切问题是,在用选定的文件夹标记不同的背景色或粗体文本时(通过绑定样式表上具有相应样式的id或类) ,我需要取消标记以前选择的目录。

那么,如何获得对间接(由于递归组件)子组件的访问?

我尝试过的内容并进行了调查:

现在,我知道在JS中您无法将指针或引用存储在变量中(否则通过存储对先前DOM元素的引用就可以轻松实现)。

我想出了一些解决方案,但是它们确实很乏味并且不是很简单。以前,我不得不基于文件系统更新来重新渲染(通过重新读取)特定的子目录。我通过从根目录传播子函数调用直到到达需要重新渲染的目录,来实现了部分重新渲染。由于FS观察程序是在根组件上创建的,因此我必须这样做。

类似地,我可以通过取消标记任务来做到这一点。选择新文件夹时,首先传播子函数调用,直到到达先前选择的文件夹为止,然后通过取消绑定样式ID对其进行取消标记。以前已经做过这件事,我知道这不是一个令人愉快的方法。

因为我可以获得click事件目标,所以我想知道是否可以以某种方式存储对先前“选定”的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项目上设置了全局事件总线,因此可以在当前选定的文件夹上绑定事件侦听器。单击另一个文件夹(因此已选择)后,它将在全局事件总线中发出一个事件,从而触发先前选择的文件夹。接下来是事件侦听器的取消标记和取消绑定。

尽管这只是一个解决方案,所以问题仍然存在。这是一个好的解决方案吗?这种方法有什么缺点吗?有更好的解决方案吗?

1 个答案:

答案 0 :(得分:0)

除了全局事件总线,您还可以使用状态管理,例如Vuex 。更改文件夹时,您只需调度一个动作。与上面提到的command pattern相反,它使用listener pattern。您还可以选择执行此操作asynchronoussynchronous

有多种方法可以从组件内部或外部注册您的侦听器/观看者。

使用该体系结构将使您可以轻松地添加撤消/重做功能,并能够在mutations的历史记录中来回导航。

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

实际上,Vuex正是针对这样的情况而构建的,即组件之间需要相互通信,但父/子prop / emit / inject机制开始变得乏味并且崩溃。

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