您好,登錄后才能下訂單哦!
本文介紹了vue2里面ref的具體使用方法,分享給大家,具體如下。
1、我們先定義兩個(gè)組件
html部分
<div id="app"> <navbar ></navbar> <pagefooter ></pagefooter> </div>
js部分
Vue.component('navbar',{ template:'<div>{{navs}}</div>', data:function () { return { navs:1 } } }); Vue.component('pagefooter',{ template:'<div>{{footer}}</div>', data:function () { return { footer:11 } } });
這里怎么直接訪問navbar的navs和pagefooter的footer值呢?這就用到ref了
2、ref的使用
修改組件
<div id="app"> <navbar ref="navbar"></navbar> <pagefooter ref="pagefooter"></pagefooter> </div> new Vue({ el:'#app', created:function(){ }, mounted:function () { this.$refs.navbar.navs=222 //ready, //這里怎么直接訪問navbar的navs和pagefooter的footer值呢, console.log(this.$refs.navbar.navs); console.log(this.$refs.pagefooter.footer); } })
如果僅僅用到一個(gè)普通標(biāo)簽上
<div ref="demo"></div>
他的作用和:
document.querySelector('[ref=demo]');
的作用一樣
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。