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.