vue基本使用--refs獲取組件或元素的實例
更新時間：2019年11月07日 17:29:57 作者：晨曦之光11
今天小編就為大家分享一篇vue基本使用--refs獲取組件或元素的實例，具有很好的參考價值，希望對大家有所幫助。一起個跟隨小編過來看看吧
說明：vm.$refs 一個對象，持有已注冊過 ref 的所有子組件（或HTML元素）
使用：在 HTML元素 中，添加ref屬性，然后在JS中通過vm.$refs.屬性來獲取
注意：如果獲取的是一個子組件，那么通過ref就能獲取到子組件中的data和methods
添加ref屬性
<div id="app"> <h1 ref="h1Ele">這是H1</h1> <hello ref="ho"></hello> <button @click="getref">獲取H1元素</button> </div>
獲取注冊過 ref 的所有組件或元素
methods: {
getref() {
// 表示從 $refs對象 中, 獲取 ref 屬性值為: h1ele DOM元素或組件
console.log(this.$refs.h1Ele.innerText);
this.$refs.h1ele.style.color = 'red';// 修改html樣式
console.log(this.$refs.ho.msg);// 獲取組件數(shù)據(jù)
console.log(this.$refs.ho.test);// 獲取組件的方法
}
}
以上這篇vue基本使用--refs獲取組件或元素的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue調(diào)用原生方法交互，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類
這篇文章主要介紹了element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
下面小編就為大家?guī)硪黄猇ue2.0 從零開始_環(huán)境搭建操作步驟。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue中如何給靜態(tài)資源增加路由前綴，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
el-date-picker 選擇日期范圍只保存左側(cè)日期面板的實現(xiàn)代碼
接到這樣的需求,日期篩選,但限制只能選擇同一個月的數(shù)據(jù),故此應(yīng)該去掉右側(cè)月份面板,今天通過本文給大家分享el-date-picker 選擇日期范圍只保存左側(cè)日期面板的實現(xiàn)代碼,感興趣的朋友一起看看吧2024-06-06
這篇文章主要為大家詳細介紹了如何基于vue手動實現(xiàn)一個日歷組件,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學習一下2024-01-01
在?Vue.js?中,組件通信是開發(fā)過程中非常重要的一部分,它涉及到不同組件之間的數(shù)據(jù)傳遞和交互,本文將介紹如何實現(xiàn)父子組件之間的有效通信,并盤點了常見的5種Vue組件通信方式總結(jié),需要的朋友可以參考下2024-03-03
Vue?watch中監(jiān)聽值的變化,判斷后修改值方式
這篇文章主要介紹了Vue?watch中監(jiān)聽值的變化,判斷后修改值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue雙擊事件2.0事件監(jiān)聽(點擊-雙擊-鼠標事件)和事件修飾符操作
這篇文章主要介紹了vue雙擊事件2.0事件監(jiān)聽(點擊-雙擊-鼠標事件)和事件修飾符操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue2.0實現(xiàn)檢測無用的代碼并刪除方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07