On ref citation

On ref citation

1. What is ref reference

ref is used to help developers obtain references to DOM elements or components without relying on jQuery.

Each vue component instance contains a $refs object, which stores the corresponding DOM element or component reference. By default,

Component's $refs points to an empty object.

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

Console printing

2. Use ref to reference DOM elements

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

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

Console printing

3. Use ref to reference component instances

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

<template>
  <div class="app-container">
    <h1>MyRef assembly</h1>
    <Mycomponent ref="myref"></Mycomponent>
    <button @click="MyrefFn">obtain $refs quote</button>
  </div>
</template>
<script>
// Introduction component
import Mycomponent from '@/components/Mycomponent.vue'
export default {
  // Register components
  components: {
    Mycomponent
  },
  methods: {
    MyrefFn() {
      console.log(this.$refs.myref) // When ref is used on a component, you get the component instance
    }
  }
}
</script>

Console printing

4. Control the on-demand switching of text box and button, and focus automatically

The Boolean value show is used to control the on-demand switching between text boxes and buttons in the component. The 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>

When you click switch, you need to focus manually every time you switch to the input box, and then the blur event can be triggered, so add a code to make input focus automatically

Running the above code, you will find that the input box does not focus automatically. The reason is that the input box is in the created function in the life cycle when switching. At this stage, the DOM element has not been created and the DOM element cannot be obtained. Therefore, the expected effect has not been achieved. Next, let's introduce the built $nextTick() method

5. this.$nextTick(callback) method

The $nextTick(callback) method of the component will delay the callback callback to be executed after the next DOM update cycle. It is commonly understood that the callback callback function is executed after the DOM update of the component is completed. This ensures that the callback callback function can operate on the latest DOM elements

Take down the code above

<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>

Summary: ref is used to assist developers in obtaining references to DOM elements or components without relying on jQuery.

Keywords: Javascript Vue

Added by tyrol_gangster on Wed, 22 Dec 2021 07:51:52 +0200