Introduction and usage examples of ref and $refs in Vue

Preface

In JavaScript, you need to use document.querySelector("#demo") to get the DOM node, and then get the value of this node. In Vue, we don’t need to get the DOM node. After the element is bound to ref, it can be called directly through this.$refs, which can reduce the consumption of getting the DOM node.

ref Introduction

ref is used to register reference information for an element or subcomponent. The reference information will be registered on the $refs object of the parent component. If used on a normal DOM element, the reference points to the DOM element; if used on a subcomponent, the reference points to the subcomponent instance.

In layman's terms, the ref feature is to assign an ID reference to an element or subcomponent, and access the instance of the element or subcomponent through this.$refs.refName

<p ref="p">Hello</p>
<children ref="children"></children>

this.$refs.p
this.$refs.children

this.$refs Introduction

this.$refs is an object that holds all DOM elements and subcomponent instances that have registered ref attributes in the current component

Note: $refs are only populated after the component is rendered, you cannot access them during the initial render, and it is non-responsive, so you cannot use it for data binding in templates

Notice:

When ref is used with v-for, the reference obtained will be an array containing the loop array source

<template>
 <div>
 <div ref="myDiv" v-for="(item, index) in arr" :key="index">{{item}}</div>
 </div>
</template>
 
<script>
export default {
 data() {
 return {
  arr: ['one', 'two', 'three', 'four']
 }
 },
 mounted() {
 console.log(this.$refs.myDiv)
 },
 methods: {}
}
</script>
 
<style lang="sass" scoped>
 
</style> 

Instance (calling the method of the child component through the ref attribute)

【1】Subcomponent code:

<template>
 <div>{{msg}}</div>
</template>
 
<script>
export default {
 data() {
 return {
  msg: 'I am a child component'
 }
 },
 methods: {
 changeMsg() {
  this.msg = 'Transformation'
 }
 }
}
</script>
 
<style lang="sass" scoped></style>

【2】Parent component code:

<template>
 <div @click="parentMethod">
 <children ref="children"></children>
 </div>
</template>
 
<script>
import children from 'components/children.vue'
export default {
 components: 
 children 
 },
 data() {
 return {}
 },
 methods: {
 parentMethod() {
  this.$refs.children //Return an object this.$refs.children.changeMsg() //Call children's changeMsg method}
 }
}
</script>
 
<style lang="sass" scoped></style>

Summarize

This is the end of this article about the introduction and use of ref and $refs in Vue. For more information about the use of ref and $refs in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!