uses of html attribute "ref" in vuejs-CodePudding

What are the use cases which require the use of the HTML attribute ref?
And what would be the value affected to it?

I've faced this example:

methods: {
  myMethod(event) {
    this.$refs.userInfo.open(); 
  },
}

<template>
  <myComponent
    ref="userInfo"
    :usr="usr" />
</template>

So my question what is userInfo really is?
From where comes open method ?

CodePudding user response：

Template refs is a way of accessing the element itself in the DOM.
It's usually used to make some DOM-specific things or to handle some edge-cases (like a vanilla JS package not fully compatible with Vue's reactivity).

If not needed, you could use regular event listeners iterations with v-fors.

In your given example, you're accessing either a component userInfo or a method/object with a public method of open. I recommend that you inspect your DOM tree in your Vue devtools.