在 Vue.js 中的方法之间共享 DOM 元素对象常量答案

【问题标题】：Sharing DOM element objects constants between methods in Vue.js在 Vue.js 中的方法之间共享 DOM 元素对象常量
【发布时间】：2019-12-31 19:42:56
【问题描述】：

我想在 Vue.js 中的方法之间共享常量以尊重 DRY：这里的大多数人都在寻找数组和/或对象中的数据共享，但我只想在同一组件中将 DOM 元素对象存储在变量中一次。我使用@vue/cli 来构建我的应用程序，因此在 Vue.js 代码之前导出它们更难（你知道，我是这个框架的新手）；我有几个节点涉及不同的方法，如submit();、reset(); 等，我不想每次需要它们时都调用document.getElementById();。是否有避免这种情况的解决方案，也许是更多的 Vue.js 方式？提前致谢！

编辑：感谢所有回复，我找到了明确的解决方案。

【问题讨论】：

你试过使用 refs 吗？
@Vivick 这就是我设法做到的（我仍在研究 Vue.js 的工作原理，来自 AngularJS 和 React）......所以，我想你可以确认这是实现目标的最佳方式: 谢谢！
I just want to store DOM element objects in variables...这听起来很不适合我。在 Vue 中，您不会直接创建和存储 DOM 节点。也许你应该更新你的答案，描述你真正想要完成的事情......
@MichalLevý 你是对的，这就是我问的原因。现在$refs 对我来说似乎更合理：基本上，我正在创建一个简单的表单，它执行 HTTP 请求并使用响应填充页面节点。一旦用户发送另一个请求，它们都应该被清理和更新，然后我会涉及到几个 DOM 元素对象，并且我正在尝试减少初始代码。
@FedericoMoretti 你所描述的在 Vue 中听起来很简单，没有 DOM 操作，甚至 refs 真的......

标签： vue.js vue-cli

【解决方案1】：

您可以将它们存储为 data 道具，然后重复使用它们。

data() {
   return {
        elem: null
   };
},
mounted() {
    this.elem = document.getElementById('someId');
},
methods: {
   method1() {
       console.log(this.elem);
   },
   method2() {
       console.log(this.elem);
   }
}

我还应该提到，Vue 有一个内置工具，称为$refs。

例如：

<template>
  <h1 ref="title">Title</h1>
</template>

<script>
   export default {
       someMethod() {
          console.log(this.$refs.title); // h1 element
       }
   }
</script>

【讨论】：

我目前正在尝试使用 refs，它按预期工作，但现在我想知道是否有一些限制：我的意思是，data 和 props 似乎都是可重复使用的通过导入的子组件就像它们过去在 React 中一样，而 $ref 没有……如果我没记错的话。几天前我第一次开始使用 Vue.js，所以我还在阅读官方文档以了解它是如何工作的。
您可以将refs 作为道具传递给子组件：<SubComponent :title="$refs.title" />

【解决方案2】：

首先，感谢大家的友好回答。我决定继续为data 对象分配值——而不是在$refs 中映射DOM 元素对象——除了我需要使用CSS 操作的节点（我的项目的某些区域应该在用户输入时显示/隐藏） : 运行速度真的更快！

【讨论】：