Vue获取DOM的几种方法总结

在Vue中获取DOM元素是很常见的需求。本文将介绍三种获取DOM元素的常用方法。

1. ref属性

在template标签中，给需要获取的DOM元素添加ref属性，通过this.$refs对象获取DOM元素。

<template>
  <div>
    <input type="text" ref="textInput">
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.textInput.focus(); // 获取DOM元素并设置焦点
  }
};
</script>

上面的代码中，我们给input元素添加了ref="textInput"属性，并在mounted()生命周期函数中通过this.$refs.textInput获取输入框元素并尝试设置焦点。

2. v-el指令（已废弃）

在旧版本的Vue中，我们可以通过v-el指令获取DOM元素，现已废弃。

<template>
  <div>
    <input type="text" v-el:textInput>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$els.textInput.focus(); // 获取DOM元素并设置焦点
  }
};
</script>

上面的代码中，我们给input元素添加了v-el:textInput指令，并在mounted()生命周期函数中通过this.$els.textInput获取输入框元素并尝试设置焦点。

3. $refs和$el

我们可以使用Vue实例的$refs和$el属性获取DOM元素。

<template>
  <div>
    <input type="text" ref="textInput">
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs); // 打印包含textInput的对象
    console.log(this.$el); // 打印整个组件的DOM元素
  }
};
</script>

上面的代码中，我们在mounted()生命周期函数中可以打印出包含textInput的$refs对象或整个组件的$el属性。这两种方法都可以获取DOM元素。

示例一：设置组件高度

在某些场景下，我们需要根据页面滚动或其他条件设置组件的高度。下面是一个根据屏幕高度和导航栏高度计算组件高度的示例。

<template>
  <div ref="container" :style="{ height: containerHeight + 'px' }">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      containerHeight: 0,
      navbarHeight: 64, // 假设导航栏高度为64px
    };
  },
  mounted() {
    this.setContainerHeight();
    window.addEventListener("resize", this.setContainerHeight);
  },
  destroyed() {
    window.removeEventListener("resize", this.setContainerHeight);
  },
  methods: {
    setContainerHeight() {
      this.containerHeight =
        window.innerHeight - this.$refs.container.offsetTop - this.navbarHeight;
    },
  },
};
</script>

上面的代码中，我们在挂载组件时计算组件高度，通过window.addEventListener("resize", this.setContainerHeight)监听窗口大小改变事件，动态更新容器高度。在setContainerHeight()方法中，我们使用$refs.container获取容器元素的DOM对象，并计算组件高度。

示例二：获取input值

在某些场景下，我们需要获取input表单的值，从而进行其他操作，下面是一个简单的示例：

<template>
  <div>
    <input type="text" ref="textInput">
    <button @click="showInputValue">获取input值</button>
  </div>
</template>

<script>
export default {
  methods: {
    showInputValue() {
      console.log(this.$refs.textInput.value);
    },
  },
};
</script>

上面的代码中，我们添加了一个按钮，点击按钮后在控制台输出输入框的值。在showInputValue()方法中，我们使用$refs.textInput获取input元素的DOM对象，并通过value属性获取input的值。