<div id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</div>
<script>
new Vue({
el: "#app",
methods:{
add(){
this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
扫描二维码关注公众号,回复:
7185546 查看本文章
}
}
})
</script>
要点:
1.ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs
对象上,就比如我们想访问子组件的一些数据和方法,就可以使用ref为子组件指定一个引用的id,调用方式为
const child = parent.$refs.id
2.一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了