vue ref()

作者：天辰皇族发布日期:2026-01-25 浏览:104

<template>
  <div>
    <input ref="myInput" placeholder="Enter something">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // 使用 this.$refs 来访问 ref 属性定义的元素
      this.$refs.myInput.focus();
    }
  }
}
</script>

解释说明：

ref 是 Vue 中用于直接访问 DOM 元素或子组件的属性。
在上面的示例中，我们通过 ref="myInput" 给 <input> 元素添加了一个引用。
在 methods 中定义了一个 focusInput 方法，点击按钮时会调用这个方法，该方法通过 this.$refs.myInput 获取到对应的 DOM 元素，并调用其 focus() 方法来聚焦输入框。

上一篇：vue withdefaults

下一篇：iframe嵌套vue页面打开空白