vue 获取 ref

在 Vue 中，你可以使用 `$refs` 来获取 `ref` 引用的元素或组件实例。

假设你在模板中定义了一个 `ref`：

<template>
  <div>
    <input ref="myInput" type="text">
    <button @click="doSomething">获取输入值</button>
  </div>
</template>

然后，在你的 Vue 组件中，你可以通过 `$refs` 来访问这个 `ref`：

<script>
export default {
  methods: {
    doSomething() {
      const inputValue = this.$refs.myInput.value;
      console.log(inputValue);
    }
  }
}
</script>

在这个例子中，当点击按钮时，`doSomething` 方法会获取输入框的值，并将其打印到控制台中。

需要注意的是，`$refs` 只会在组件渲染完成后才填充，并且它是一个直接操作 DOM 的方式。因此，最好在 Vue 的生命周期钩子函数中使用 `$refs`，例如 `mounted` 或 `updated`。

相关问题

vue 获取ref高度

在Vue中，可以使用`this.$refs`来获取组件的引用(ref)。要获取引用的高度，可以通过`$el.offsetHeight`属性来获取。例如，如果你有一个组件引用名为"searchBar"，你可以使用以下代码获取它的高度：

const searchBarHeight = this.$refs.searchBar.$el.offsetHeight;

同样地，如果你有一个组件引用名为"bottomOperateBtn"，你可以使用以下代码获取它的高度：

const bottomBtnHeight = this.$refs.bottomOperateBtn.$el.offsetHeight;

你还可以使用`window.innerHeight`来获取浏览器的可视区域高度：

const height = window.innerHeight;

最后，你可以使用`calc()`函数来计算并设置元素的高度，例如：

this.$refs.classifyContent.style.height = `calc(${height}px - ${searchBarHeight}px - ${bottomBtnHeight}px)`;

这样就可以根据浏览器窗口的高度动态设置元素的高度了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue动态获取高度(移动端)](https://blog.csdn.net/JunVei/article/details/126273230)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

vue3 获取ref

在Vue3中，可以通过ref来获取DOM元素或组件实例。ref可以用在模板中的任何元素上，也可以用在组件上。通过ref获取到的是一个响应式对象，可以通过.value来获取到实际的值。在Vue3中，获取ref的方式有以下几种：
1. 原生JS获取DOM元素：可以使用document.querySelector(选择器)、document.getElementById(id选择器)、document.getElementsByClassName(class选择器)等方法来获取DOM元素。
2. 通过ref获取单个DOM元素：可以在模板中使用ref属性来获取DOM元素，例如&lt;div ref='divDom'&gt;&lt;/div&gt;，然后在setup函数中使用ref函数来创建一个响应式对象，例如const divDom = ref(null)，最后可以在onMounted钩子函数中使用divDom.value来获取到实际的DOM元素。
3. 通过ref获取v-for循环中的DOM元素：可以在v-for循环中使用ref属性来获取DOM元素，例如&lt;div ref='getDivDom' v-for="item in list" :data-id="item.id"&gt;&lt;/div&gt;，然后在setup函数中使用ref函数和Map数据结构来创建一个响应式对象，例如const divDomList = ref(new Map())，最后可以在onMounted钩子函数中使用divDomList.value.get(item.id)来获取到实际的DOM元素。