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

Question

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

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

Answer 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>

Answer 2

首先感谢大家的热心解答。我决定继续为 data 对象赋值——而不是在 $refs 中映射 DOM 元素对象——除了我需要使用 CSS 操作的节点（某些区域我的项目应该是 shown/hidden 用户输入）：它工作得真的更快！

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

Sharing DOM element objects constants between methods in Vue.js

vue.js

vue-cli