refs function in Vue3: direct access to component instances

The refs function in Vue3: direct access to component instances

In Vue3, a new function named refs has been added, which can directly access component instances, providing developers with a more convenient development method. . In this article, we will take a deep dive into the refs function in Vue3 to understand how to use it and its value to component development.

Vue2 reference method

In Vue2, we can use $refs to reference components or elements. For example, we can obtain a component instance through the following code:

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.myComponentRef)
  }
}
</script>

In the mounted hook, we access the component instance through this.$refs.myComponentRef, which facilitates our operation of the component to a certain extent. However, in Vue2, $refs has the following problems:

1. Since $refs is assigned in the mounted hook, if the component is used immediately after rendering, the component instance may not be found.
2. Since $refs is just a simple object, when we want to listen to the events or methods of the component, we need to manually bind it in the mounted hook.
3. In the case of nested components, if you use $refs to access the grandchild component instance, you need to perform recursive operations on $refs.

The reference method of Vue3

Compared with Vue2, the new refs function of Vue3 optimizes the reference method of components. Using the refs function, you can directly access the component instance without using $refs, thus avoiding the problems of Vue2.

We can get a component instance through the following code:

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const myComponentRef = ref(null)
    return {
      myComponentRef
    }
  },
  mounted() {
    console.log(this.myComponentRef)
  }
}
</script>

In Vue3, we use the ref function to turn myCompomentRef into a reactive variable. An object containing myComponentRef is returned in the setup hook and exposed in the component. In the mounted hook, we can directly access the component instance through this.myComponentRef.

If we need to access the grandson component instance, we can also do it directly through the refs function:

<template>
  <div>
    <parent-component ref="parentComponentRef"></parent-component>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const parentComponentRef = ref(null)
    return {
      parentComponentRef
    }
  },
  mounted() {
    console.log(this.parentComponentRef.value.$refs.childComponentRef)
  }
}
</script>

In this example, we get the parent component instance through the refs function. In the mounted hook, we can access the grandchild component instance through this.parentComponentRef.value.$refs.childComponentRef.

Summary

In Vue3, the refs function provides a more intuitive and convenient way to access component instances, avoiding the problems that exist in Vue2. It is also one of the new features of Vue3, and it is recommended that developers master it. In addition to using it in setup hook, we can also use it in template, for example:

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
    <button @click="() => myComponentRef.value.update()">update</button>
  </div>
</template>

In this example, we bind a click event, and when the button is clicked, myComponentRef.value.update( is called ) method, so that we don’t need to manually bind events in the mounted hook.

Finally, I hope this article can be helpful to the use of refs function in Vue3, and can also provide some ideas and references for Vue3 developers.

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