浅谈vue.js中$refs的使用方法（附代码）-View.js-php.cn

浅谈vue.js中$refs的使用方法（附代码）

青灯夜游

Lepaskan： 2021-02-16 09:31:13

ke hadapan

2546 orang telah melayarinya

浅谈vue.js中$refs的使用方法（附代码）

相关推荐：《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>

Salin selepas log masuk

更多编程相关知识，请访问：编程教学！！

Atas ialah kandungan terperinci 浅谈vue.js中$refs的使用方法（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!