Brief introduction to REF Citation

1. What is ref reference

Ref is used to help developers get references to DOM elements or components without relying on jQuery.

Each vUE component instance contains a $refs object that stores a reference to the corresponding DOM element or component. By default,

The component’s $refs points to an empty object.

<template>
  <div class="app-container">
    <h1 ref="myref">MyRef components</h1>
    <button @click="MyrefFn">Get the $refs reference</button>
  </div>
</template>
<script>
export default {
  methods: {
    MyrefFn() {
      console.log(this) // This is the instance object of the current component}}}</script>
Copy the code

Console printing

2. UserefReferencing DOM elements

If you want to use ref to reference a DOM element on a page, you can do so as follows:

<template>
  <div class="app-container">
    <h1 ref="myref">MyRef components</h1>
    <button @click="MyrefFn">Get the $refs reference</button>
  </div>
</template>
<script>
export default {
  methods: {
    MyrefFn() {
      console.log(this.$refs.myref)
      this.$refs.myref.style.color = 'red'}}}</script>
Copy the code

Console printing

Use 3.refReference component instance

If you want to use ref to reference a component instance on a page, you can do so as follows:

<template>
  <div class="app-container">
    <h1>MyRef components</h1>
    <Mycomponent ref="myref"></Mycomponent>
    <button @click="MyrefFn">Get the $refs reference</button>
  </div>
</template>
<script>
// Import components
import Mycomponent from '@/components/Mycomponent.vue'
export default {
  // Register the component
  components: {
    Mycomponent
  },
  methods: {
    MyrefFn() {
      console.log(this.$refs.myref) // ref is used on the component to get the component instance}}}</script>
Copy the code

Console printing

4. Control the text box and button on demand switching, and automatic focus

The Boolean show is used to control on demand switching between text boxes and buttons in the component. Example code is as follows:

<template>
  <div class="app-container">
    <input ref="inp" type="text" v-if="show" @blur="show = false" />
    <button v-else @click="showFn">Switch input</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false}},methods: {
    showFn() {
      this.show = true
      // Make the input box auto-focus
      this.$refs.inp.focus()
    }
  }
}
</script>
Copy the code

When you click Switch, you need to manually focus each time you switch to the input field before the Blur event is triggered, so add a line of code to make the input auto-focus

If you run the above code, you will find that the input box is not auto-focused. The reason is that the input box is a created function in the life cycle at the time of the switch. At this stage, DOM elements have not been created and DOM elements are not available, so the desired effect is not achieved. Let’s take a look at the $nextTick() method that’s built up

run

5. this.$nextTick(callback) methods

The component’s $nextTick(callback) method delays the callback callback until after the next DOM update cycle. A callback is executed after the COMPONENT’s DOM update is complete. This ensures that the callback function can operate on the latest DOM element

Take the code off the top

<template>
  <div class="app-container">
    <input ref="inp" type="text" v-if="show" @blur="show = false" />
    <button v-else @click="showFn">Switch input</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false}},methods: {
    showFn() {
      this.show = true
      // Make the input box auto-focus
      this.$nextTick(() = > {
        this.$refs.inp.focus()
      })
    }
  }
}
</script>
Copy the code

run

---

Summary: Ref is used to help developers get references to DOM elements or components without relying on jQuery.