What does ref mean in vue

The ref directive in Vue is used to obtain a reference to a DOM element or component in order to operate and interact with it. Specific usage includes string ref and function ref, and its functions include direct access to DOM, accessing component instances, managing form data and implementing custom instructions.

The meaning of ref in Vue

In Vue, ref is an instruction used to give DOM elements Or the component takes a reference. Using ref, you can get the DOM node or Vue instance of an element or component so you can operate on them.

Usage

There are two ways to use ref:

• String ref:Use the v-ref instruction , using the string as the value of ref. For example: <div v-ref="myRef">...</div>
• Function ref: Use the v-ref-function directive , taking the function as the value of ref. The function is called after the component instance is created and receives a DOM node or Vue instance as a parameter. For example: <div v-ref-function="myRef">...</div>

##Function

ref is usually used for the following purposes:

• Direct access to DOM: You can directly access DOM nodes to perform operations, such as changing styles, adding event listeners, etc.
• Access component instances: You can access other component instances, call their methods or access their properties.
• Manage form data: You can easily get or set values ​​from your forms.
• Implement custom directives: You can use ref to implement custom directives to interact with the DOM or components.

Example

The following example shows how to use ref in Vue:

<template>
  <div v-ref="myRef">Hello Vue!</div>
</template>

<script>
export default {
  mounted() {
    // 访问 DOM 节点
    this.$refs.myRef.style.color = 'red';

    // 访问组件实例
    const otherComponent = this.$refs.otherComponent;
    otherComponent.greet();
  }
}
</script>

By using ref, you can easily interact with Vue Interact with DOM elements and components in it to achieve richer functionality.

The above is the detailed content of What does ref mean in vue. For more information, please follow other related articles on the PHP Chinese website!