VUE中操作dom元素的几种方法

最新推荐文章于 2025-05-20 09:20:37 发布

Leal-Lee

最新推荐文章于 2025-05-20 09:20:37 发布

阅读量4.8k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/CD_promise/article/details/113524062

本文介绍了在Vue中操作DOM的两种方法：一是利用`$refs`访问子组件实例或子元素，包括如何聚焦子组件的输入框；二是创建自定义指令，如`v-focus`，实现对特定元素的焦点控制。强调了$refs的使用时机和注意事项，以及自定义指令的注册和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE中操作dom元素
方法一：
访问子组件实例或子元素
尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如：

<base-input ref="usernameInput"></base-input>

现在在你已经定义了这个 ref 属性的组件里，你可以使用：

this.$refs.usernameInput
来访问这个实例，以便不时之需。比如程序化地从一个父级组件聚焦这个输入框。在刚才那个例子中，该组件也可以使用一个类似的 ref 提供对内部这个指定元素的访问，例如：

<input ref="input">

甚至可以通过其父级组件定义方法：

methods: {
// 用来从父级组件聚焦输入框

  focus: function () {
    this.$refs.input.focus()
  }
}

这样就允许父级组件通过下面的代码聚焦里的输入框：

this.$refs.usernameInput.focus()

当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

方法二：
使用自定义指令
// 注册一个全局自定义指令 v-focus

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>