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