Detailed explanation of ref function in Vue3: direct access to component elements

Detailed explanation of the ref function in Vue3: direct access to component elements

Vue3 is the latest version of the Vue framework, which brings some brand-new APIs, one of which is a very important API is the ref function. In this article, we will explain in detail the role and usage of the ref function, and how to directly access component elements in Vue3.

1. The role and usage of the ref function

The ref function is a reactive API in Vue3. It provides a simple method to obtain DOM elements, sub- A reference to a component or any other Vue instance. In a Vue component, you can use the ref function to register a reference to an element or component.

For example, in a Vue component, if we want to get a reference to an input element, we can write like this:

<template>
  <div>
    <input ref="myInput" />
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myInput); // 获取myInput元素
  }
}
</script>

In the above code, we use the ref function to register A reference named myInput. In the mounted lifecycle hook function, we can use this.$refs.myInput to get the actual DOM element.

In addition to DOM elements, the ref function can also be used to obtain references to subcomponents. For example:

<template>
  <div>
    <my-component ref="myComponent"></my-component>
  </div>
</template>

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

export default {
  components: {
    'my-component': MyComponent
  },
  mounted() {
    console.log(this.$refs.myComponent); // 获取MyComponent组件实例
  }
}
</script>

In the above code, we registered a reference named myComponent, which points to an instance of the MyComponent component.

2. Directly access component elements in Vue3

In Vue3, the ref function can not only be used to obtain references to DOM elements or subcomponents in components, but also directly Access the component element itself. This approach allows us to operate component elements more efficiently without using DOM operations.

For example, in Vue3, we can directly access the value attribute of the input element without using this.$refs.myInput.value. As shown below:

<template>
  <div>
    <input ref="myInput" v-model="message" />
    <button @click="showMessage">显示消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    showMessage() {
      console.log(this.$refs.myInput.value); // 直接访问input元素的value属性
      console.log(this.message); // 通过双向绑定访问message属性
    }
  }
}
</script>

In the above code, we directly access the value attribute of the input element. This method is more intuitive and concise than using this.$refs.myInput.value.

In addition to accessing element attributes, we can also directly access the element's method through the ref function. For example, in Vue3, we can directly access the focus method of the input element, as shown below:

<template>
  <div>
    <input ref="myInput" />
    <button @click="focusInput">获取焦点</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus(); // 直接调用input元素的focus方法
    }
  }
}
</script>

In the above code, we directly call the focus method of the input element, which is better than using this. The $refs.myInput.focus() method is more intuitive and concise.

3. Summary

In Vue3, the ref function can not only be used to obtain a reference to a DOM element or subcomponent in a component, but can also directly access the component element itself. This This way allows us to operate component elements more efficiently. In actual development, we can choose different usage methods according to needs and combine them with other APIs provided by Vue3 to handle component elements more flexibly.

The above is the detailed content of Detailed explanation of ref function in Vue3: direct access to component elements. For more information, please follow other related articles on the PHP Chinese website!