vue中的ref和$refs的使用
ref：被用來給元素或子組件注冊引用信息，引用信息將會注冊在父組件的$refs對象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。
ref 有三種用法：
1、ref 加在普通的元素上，用this.ref.name 獲取到的是dom元素
2、ref 加在子組件上，用this.ref.name 獲取到的是組件實(shí)例，可以使用組件的所有方法。
3、如何利用 v-for 和 ref 獲取一組數(shù)組或者dom 節(jié)點(diǎn)
普通的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 元素和組件實(shí)例
注意：$refs只會在組件渲染完成之后生效，并且它們不是響應(yīng)式的。這只意味著一個直接的子組件封裝的“逃生艙”——你應(yīng)該避免在模板或計(jì)算屬性中訪問 $refs
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js集成echarts時遇到的一些問題總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue.js集成echarts遇到的一些問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vuejs實(shí)現(xiàn)本地?cái)?shù)據(jù)的篩選分頁功能思路詳解
今天做項(xiàng)目需要一份根據(jù)本地?cái)?shù)據(jù)的篩選分頁功能，下面小編把vuejs實(shí)現(xiàn)本地?cái)?shù)據(jù)的篩選分頁功能的實(shí)現(xiàn)思路分享到腳本之家平臺，需要的朋友可以參考下2017-11-11
vue3.0使用mapState,mapGetters和mapActions的方式
這篇文章主要介紹了vue3.0使用mapState,mapGetters和mapActions的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。這篇文章給大家介紹了Vue.js教程之計(jì)算屬性，非常不錯，感興趣的的朋友一起看看吧2016-11-11
Vue.js組件tree實(shí)現(xiàn)省市多級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tree實(shí)現(xiàn)省市多級聯(lián)動的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Vue實(shí)現(xiàn)雙token無感刷新的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)雙token無感刷新,雙token機(jī)制,尤其是指在OAuth 2.0授權(quán)協(xié)議中廣泛使用的access token（訪問令牌）和refresh token（刷新令牌）組合,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)數(shù)字時鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
vue輸入框使用模糊搜索功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue輸入框使用模糊搜索功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
el-table樹形數(shù)據(jù)量過大,導(dǎo)致頁面卡頓問題及解決
這篇文章主要介紹了el-table樹形數(shù)據(jù)量過大,導(dǎo)致頁面卡頓問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
關(guān)于vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法
sockjs-node 是一個JavaScript庫,提供跨瀏覽器JavaScript的API,創(chuàng)建了一個低延遲、全雙工的瀏覽器和web服務(wù)器之間通信通道,這篇文章主要介紹了vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法,需要的朋友可以參考下2023-12-12