Vue.js 2.x 中获取 DOM 元素的方法-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 是一个流行的前端框架，它使得构建交互性强的单页面应用变得非常容易。然而，在 Vue.js 中，有时需要获取 DOM 元素来访问或操作它们，这就需要我们了解如何在 Vue.js 中获取 DOM 元素。在本文中，我们将介绍 Vue.js 中获取 DOM 元素的几种方法。

1. 通过 ref 属性获取 DOM 元素

在 Vue.js 中，给元素添加 ref 属性可以让我们在组件中使用 this.$refs 来获取对 DOM 元素的引用。ref 属性可以添加到任何 HTML 标签上，包括组件标签。

示例代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <input type="text" ref="myInput">
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myInput);
  },
};
</script>

在上面的代码中，我们给 input 标签添加了 ref 属性，然后在 mounted 钩子函数中通过 this.$refs.myInput 来获取对 input 标签的引用。这种方法是 Vue.js 中获取 DOM 元素最常用的方法。

2. 通过 $el 属性获取 DOM 元素

在单文件组件中，我们可以通过访问组件实例的 $el 属性来获取组件的根 DOM 元素。$el 是组件实例下的一个属性，它是一个指向组件根 DOM 元素的引用。

示例代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <p>这是组件的内容</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$el);
  },
};
</script>

在上面的代码中，我们在组件中通过访问 $el 属性来获取组件的根 DOM 元素。

3. 通过 $refs 嵌套获取 DOM 元素

当我们需要获取嵌套在组件内部的 DOM 元素时，可以通过 $refs 嵌套来获取。我们只需在子组件中添加 ref 属性，在父组件中通过 $refs 引用相应的子组件即可。

示例代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <child ref="myChild"></child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  mounted() {
    console.log(this.$refs.myChild.$el);
  },
};
</script>

上面的代码中，我们在父组件中访问它的 $refs.myChild.$el 属性来获取子组件的根 DOM 元素。通过这种方法，我们可以在父组件中访问子组件的任意 DOM 元素。

4. 使用 Vue.js 插件

除了上述方法外，还可以使用 Vue.js 插件来获取 DOM 元素。常见的插件包括 vue-dom-portal 和 vue-dom-portal-plus。这些插件提供了一些方便的方法来操作 DOM 元素。

示例代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <portal to="body">
      <div>Hello, I am a portal!</div>
    </portal>
  </div>
</template>

<script>
import Portal from 'vue-dom-portal';

export default {
  components: {
    Portal,
  },
};
</script>

上面的代码中，我们使用了 vue-dom-portal 插件来创建一个 portal。portal 是一个插件，它可以让我们将组件的根 DOM 元素嵌套在父组件之外的任意位置。在这个示例中，我们将 portal 的 to 属性设置为 body，这意味着整个组件将被附加到 document.body 上。通过这种方法，我们可以方便地呈现组件的根元素。

总结：

在 Vue.js 中，我们可以使用多种方法来获取 DOM 元素。最常用的方法是通过 ref 属性来获取元素，也可以通过 $el 属性、$refs 嵌套和 Vue.js 插件来获取元素。了解这些方法将让我们更有效地操作 DOM 元素，并且可以更好地理解 Vue.js。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6532caf67d4982a6eb5bda95