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

In Vue3, the ref function is very useful and provides a very convenient operation method during the development process. It allows direct access to Vue component elements and manipulation of them.

The ref function is a function that creates an object that is responsively bound. You can use this within a Vue component to reference an element or subcomponent and operate on those elements or subcomponents from the parent component.

The ref function returns a responsive object and exposes a reference to the specified element or subcomponent through the object. Therefore, you can directly access the element or subcomponent through this object and perform operations in the Vue component.

Here is a simple example:

<template>
  <div>
    <button ref="myBtn" @click="handleClick">Click Me</button>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const myBtn = ref(null);

      function handleClick() {
        myBtn.value.innerHTML = 'Hello Vue3!';
      }

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

In this example, we define a button element reference myBtn and append it to ref Function and bound a click event handleClick. In the setup of the component instance, we return this reference and the handleClick function so that we can use them in the template. At the same time, we modified the content of the button element in the handleClick function.

In this way, we can easily reference elements and operate on them in Vue components without having to go through DOM operations.

In addition to referencing elements, ref can also refer to subcomponents. Here's an example of referencing a child component:

<template>
  <div>
    <Child ref="myChild" />
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
  import Child from './Child.vue';
  import { ref } from 'vue';

  export default {
    components: {
      Child
    },
    setup() {
      const myChild = ref(null);

      function handleClick() {
        myChild.value.sayHello();
      }

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

In this example, we're referencing the child component Child in a very similar way to the previous example. , and the reference and the handleClick method are returned in setup. In the handleClick method, we can access the child component object through myChild.value and call its method sayHello. In Vue3, the use of the

ref

function is very simple. You can not only reference elements, but also reference sub-components, and you can return the reference and sum in the setup function. event handler. This makes it easier and more convenient to directly access elements and subcomponents in Vue components.

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