Ref function in Vue3: direct access to component elements

The ref function in Vue3: direct access to component elements

Vue is a very popular JavaScript framework that binds data and interfaces to each other, making development simpler and more efficient. Vue3 is the latest version of the Vue framework, bringing more optimizations and new features. One of the new features is the ref function, which can directly access component elements, which greatly facilitates development.

In Vue2, we usually need to use $refs to get component elements. However, $refs has some limitations. First, component elements can only be obtained after the mounted life cycle. Second, if dynamic components or v-for instructions are used, $refs will become unreliable, which greatly limits development. flexibility. The ref function in Vue3 solves these problems. It allows us to directly access component elements without waiting for the mounted life cycle.

The use of the ref function is very simple. You only need to add the ref attribute to the element that needs to be accessed. For example, we have a button component that needs to operate other components through button click events. In Vue2, we need to get the button component through $refs in the parent component, but in Vue3 we can use the ref function directly, as shown below:

<template>
  <div>
    <button @click="handleClick" ref="myButton">Click me</button>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const myButton = ref(null);

    function handleClick() {
      myButton.value.innerText = 'Button clicked';
    }

    return {
      myButton,
      handleClick,
    };
  },
};
</script>

In the above code, we use the ref function to get the button element and assign it to the myButton variable. In the handleClick event, we can directly use myButton.value to access the button element, so that we can easily modify the element properties.

It should be noted that the ref function can only be used in the setup function. The setup function is a new lifecycle function in Vue3, which is executed before the component is created and can directly use reactive data and composed APIs. Through the setup function, we can access elements before the component is created, which is very useful for using third-party libraries or integrating Vue3 with other technology stacks.

In addition to accessing native HTML elements, the ref function can also be used to access component instances. For example, we have a component named myComponent and we need to operate its properties or methods in the parent component. In Vue2, we need to get the instance of myComponent through $refs, but in Vue3 we can use the ref function directly, as shown below:

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
  </div>
</template>
<script>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';
export default {
  components: {
    'my-component': MyComponent,
  },
  setup() {
    const myComponentRef = ref(null);

    function handleClick() {
      myComponentRef.value.myMethod();
    }

    return {
      myComponentRef,
      handleClick,
    };
  },
};
</script>

In the above code, we use the ref function to get An instance of the myComponent component and assigns it to the myComponentRef variable. In the handleClick event, we can directly use myComponentRef.value to access the properties and methods of the component instance, so that we can easily operate the component.

In short, the ref function is a very convenient feature in Vue3. It allows us to directly access component elements and instances, making development more flexible and efficient. If you are learning Vue3 or preparing to upgrade your Vue2 project to Vue3, be sure not to miss this powerful function.

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