Vue.js中$refs{}如何獲取DOM元素
更新時間：2024年03月06日 08:36:11 作者：Yvonne.Y
這篇文章主要介紹了Vue.js中$refs{}如何獲取DOM元素問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
如果我們想獲取DOM元素，一般使用js中的document.querySelector來獲取這個dom節(jié)點，然后在獲取元素的值，現(xiàn)在Vue提供給我們一種更便捷的方式來獲取DOM元素-----$refs{}
$refs{}----獲取標(biāo)簽元素
說明：一個對象，持有注冊過 ref attribute 的所有 DOM 元素和組件實例
作用：減少DOM操作
用法：
原生方法
此例是利用原生jsdocument.getElementById()獲取元素
<div id="app">
<input type="button" value="獲取元素" @click='btn'>
<h3 id="myh3">哈哈, 今天天氣不錯</h3>
</div>
<script>
var vm= new Vue({
el:'#app',
data:{},
methods: {
btn(){
console.log(document.getElementById('myh3').innerText);
}
}
})
console.log(vm);
</script>
效果如下：
我們將vm實例輸出，查看這個對象
vm.$refs方法獲取
1.給元素定義ref=",輸出vm實例
<h3 id="myh3" ref="myh3">哈哈, 今天天氣不錯</h3>
2.在實例的方法中輸出，
獲取元素方法如下：
console.log(this.$refs.myh3);
獲取內(nèi)容方法如下：
console.log(this.$refs.myh3.innertext); //或者 console.log(this.$refs.myh3.innerHtml);
$refs{}----獲取Vue組件
查看vm實例：
<div id="app">
<input type="button" value="獲取元素" @click='btn'>
<login ref='mylogin'></login>
</div>
<script>
var login={
template:'<h1>登錄組件</h1>',
data() {
return {
msg:'son msg'
}
},
methods: {
show(){
console.log('調(diào)用了子組件的方法');
}
},
}
var vm= new Vue({
el:'#app',
data:{},
methods: {
btn(){
}
},
components:{
login
}
})
console.log(vm);
</script>
利用$refs獲取子組件的方法：
console.log(this.$refs.mylogin);
利用$refs獲取子組件內(nèi)容的方法：
this.$refs.mylogin.show();
利用$refs獲取子組件中的data：
console.log(this.$refs.mylogin.msg);
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
前端vue+elementUI如何實現(xiàn)記住密碼功能
這篇文章主要給大家介紹了關(guān)于vue+elementUI如何實現(xiàn)記住密碼功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
本文主要介紹了在Vue3項目中實現(xiàn)常見文件類型的預(yù)覽功能,包括docx、xlsx、pdf、txt、png、jpg、jpeg、mp4和mp3,具有一定的參考價值,感興趣的可以了解一下2025-01-01
這篇文章主要介紹了Vue2.0在IE11版本瀏覽器中的兼容性問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue如何優(yōu)雅的使用全局WebSocket問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了解決vux 中popup 組件Mask 遮罩在最上層的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue路由傳參刷新后數(shù)據(jù)丟失問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在本篇文章里我們給大家整理了一篇關(guān)于優(yōu)化VUE項目的四個總要點，對此有需要的朋友們學(xué)習(xí)下天。2019-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)搜索小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
在?Vue.js?中主要通過第三方庫實現(xiàn)表格拖動排序功能,其中最常用的庫是?SortableJS,下面我們就來看看如何使用SortableJS實現(xiàn)表格拖動排序吧2025-01-01
要求點擊修改按鈕之后部分輸入框由禁用狀態(tài)變?yōu)榭捎脿顟B(tài)。下面我給大家分享一段實例代碼基于vue組件中點擊按鈕后修改輸入框的狀態(tài)，需要的的朋友參考下2017-04-04