How to use $refs

This time I will show you how to use $refs and what are the precautions for using $refs. The following is a practical case, let's take a look.

Generally speaking, to get the DOM element, you need document.querySelector(".input1")Get the dom node, and then get the value of input1.

But after binding with ref, we no longer need to obtain the dom node. We can directly bind input1 to the above input and then call it in $refs.

Then call it like this in javascript: this.$refs.input1 This can reduce the consumption of obtaining dom nodes

The usage is as follows:

HTML:

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>

JS:

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

Let me introduce you to the basic usage of vue $refs. The specific code is as follows:

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>
<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

Generally speaking, get DOM elements , need document.querySelector(".input1")Get this dom node, and then get the value of input1.

But after binding with ref, we no longer need to obtain the dom node. We can directly bind input1 to the above input and then call it in $refs.

Then call it like this in javascript: this.$refs.input1 This can reduce the consumption of obtaining dom nodes

I believe you have mastered the method after reading the case in this article, please come for more exciting information Pay attention to other related articles on php Chinese website!

Recommended reading:

Processing parent component method updates to child components that cannot be rendered

How to use vuex to operate state objects

The above is the detailed content of How to use $refs. For more information, please follow other related articles on the PHP Chinese website!