Vue2中ref属性的使用方法

川长思鸟来 2021-09-15 04:12 644阅读 0赞

一.了解ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

1.如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；

<template>
        <div>
            <input type="text" ref="inp" id="inp"/>
            <button @click="add">添加</button>
        </div>
    </template>
    <script>
    export default {
    	methods:{
    		add:function(){
    			this.$refs.inp.value='22';
    			console.log(this.$refs.inp);
    		}
    	}
    }
    </script>

从上面的列子可以看出**，inp的引用信息为inp ，$refs 是所有注册过的ref的一个集合**，

console.log(this.$refs.inp)//<input type="text" id="inp">  
console.log(document.getElementById('inp'))//<input type="text" id="inp">  
** 这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗**。

2.如果用在子组件上，引用就指向组件实例：

尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。例如：

<template>
        <div>
            <input type="text" ref="inp" id="inp"/>
            <button @click="add">添加</button>
            <child ref="childs"></child>
        </div>
    </template>
    <script>
    import Vue from 'vue';  
    Vue.component('child',{
    	template:"<div>我是一个child组件！ </div>"
    })
    export default {
    	methods:{
    		add:function(){
    			this.$refs.inp.value='22';
    			console.log(this.$refs.inp);
    			console.log(this.$refs.childs);
    		}
    	}
    }
    </script>

3.与for连用的时候

当 ref 和 v-for 一起使用时，获取到的引用会是一个数组，包含和循环数据源对应的子组件。

<template>
        <div>
            <input type="text" ref="inp" id="inp"/>
            <button @click="add">添加</button>
            <child ref="childs"></child>
            <ul v-for="item in list">
            	<li  ref="refContent">姓名：{
       {item.name}}，年龄：{
       {item.age}}</li>
            </ul>
        </div>
    </template>
    <script>
    import Vue from 'vue';  
    Vue.component('child',{
    	template:"<div>我是一个child组件！ </div>"
    })
    export default {
    	data() {
    		return{
    			list:[{name:'小高',age:18},{name:'小吴',age:20},{name:'小陈',age:23}]
    		}
        },
        mounted() {
    		console.log(this.$refs.refContent);
        },
    	methods:{
    		add:function(){
    			this.$refs.inp.value='22';
    			console.log(this.$refs.inp);
    			
    		}
    	}
    }
    </script>