vue：ref的作用和实例

作者：System 时间：2024年08月12日分类：所有,vue.js 字数：790

这篇文章距离上次修改已过247天，其中的内容可能已经有所变动。

ref 在 Vue 中主要用来访问 DOM 元素或组件实例。

当 ref 用于 DOM 元素时，ref 引用的是真实 DOM 元素实例，可以通过 this.$refs.refName 来访问。
当 ref 用于组件实例时，ref 引用的是组件实例，可以通过 this.$refs.refName 来访问组件的方法和数据。

实例代码：

<template>
  <div>
    <input ref="inputRef" type="text">
    <button @click="focusInput">Focus Input</button>
    <my-component ref="myComponentRef"></my-component>
  </div>
</template>

<script>
  export default {
    methods: {
      focusInput() {
        // 使用 ref 访问 DOM 元素
        this.$refs.inputRef.focus();
        // 使用 ref 访问组件实例
        this.$refs.myComponentRef.someMethod();
      }
    }
  }
</script>

在这个例子中，focusInput 方法通过 this.$refs.inputRef.focus() 使文本输入框获得焦点，通过 this.$refs.myComponentRef.someMethod() 调用了子组件 my-component 的 someMethod 方法。

vue：ref的作用和实例

评论已关闭

推荐阅读