<div id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</div>
<script>
new view ({
el: "#app",
methods:{
add(){
. this $ refs.input1.value = "22" ; //this.$refs.input1 reduce acquisition dom consumption of the nodes
}
}
})
</script>
Highlights:
1.ref It is used to reference elements or subassemblies registration information. Reference information will be registered in the parent component of $refs the object, for example, we think of some way to access data and sub-assemblies, you can use the ref as a reference subcomponents of the specified id, call the way
const child = parent.$refs.id
2. In general, access to DOM elements need document.querySelector ( ".input1" ) get the dom node, and then get input1 value. But with the ref after binding, we do not need to obtain dom node, and directly above the input binding on INPUT1 , then $ refs inside to call on the line. Then javascript this call inside: . $ Refs.input1 the this so that it can reduce the acquisition dom node consumes