ref：被用來給元素或子組件注冊引用信息，引用信息將會注冊在父組件的$refs對象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。

ref 有三種用法：

1、ref 加在普通的元素上，用this.ref.name 獲取到的是dom元素

2、ref 加在子組件上，用this.ref.name 獲取到的是組件實例，可以使用組件的所有方法。

3、如何利用 v-for 和 ref 獲取一組數組或者dom 節點

普通的DOM元素上使用

<div id="app7">  <input type="text"ref="TEXT"/ >  <button @click="add">添加</button></div>

var app7=new Vue({  el:"#app7",  data:{  },  methods:{    add:function(){      console.log(this.$refs);    }  }})

子組件上使用

<div id="app7">  <aaa ref=inputText></aaa>  <input type="text"ref="TEXT" >  <button @click="add">添加</button></div>

 Vue.component('aaa',{    template:"<div>我是一個組件</div>"  })  var app7=new Vue({    el:"#app7",    data:{    },    methods:{      add:function(){        console.log(this.$refs.inputText);        console.log(this.$refs);      }    }  })  var aaa=app7.$refs.inputText;  //console.log(aaa);  //console.log(aaa.$el.innerText);

$refs:一個對象，持有注冊過 ref 特性 的所有 DOM 元素和組件實例

注意：$refs只會在組件渲染完成之后生效，并且它們不是響應式的。這只意味著一個直接的子組件封裝的“逃生艙”——你應該避免在模板或計算屬性中訪問 $refs

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。