相关推荐:《vue.js教程》
说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)
使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取
注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods
一般来讲,获取DOM元素,需document.querySelector(".input1")
获取这个dom节点,然后在获取input1的值。
但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。
然后在javascript里面这样调用:this.$refs.input1
这样就可以减少获取dom节点的消耗了。示例代码如下:
<-- 添加ref属性 --> <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> // 获取注册过 ref 的所有组件或元素 <script> new Vue({ el: "#app", methods:{ add:function(){ this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗 } } }) </script>
更多编程相关知识,请访问:编程教学!!
以上是浅谈vue.js中$refs的使用方法(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!