vue2里面ref的具體使用方法
更新時(shí)間：2017年10月27日 09:30:41 作者：conquer_冷憶
本篇文章主要介紹了vue2里面ref的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
本文介紹了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]');
的作用一樣
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了uniapp?vue與nvue輪播圖輪播圖組件的實(shí)例代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
這篇文章主要為大家介紹了Vue執(zhí)行流程及渲染解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue3 el-table 如何通過深度選擇器::v-deep修改組件內(nèi)部樣式(默認(rèn)樣式)
在Vue3中,通過使用深度選擇器::v-deep可以有效修改element-plus中el-table組件的內(nèi)部樣式,這種方法允許開發(fā)者覆蓋默認(rèn)的樣式,實(shí)現(xiàn)自定義的視覺效果,本文給大家介紹vue3 el-table 通過深度選擇器::v-deep修改組件內(nèi)部樣式,感興趣的朋友一起看看吧2024-10-10
Vue3.3?+?TS4構(gòu)建實(shí)現(xiàn)ElementPlus功能的組件庫示例
Vue.js?是目前最盛行的前端框架之一,而?TypeScript?則是一種靜態(tài)類型言語,它能夠讓開發(fā)人員在編寫代碼時(shí)愈加平安和高效,本文將引見如何運(yùn)用?Vue.js?3.3?和?TypeScript?4?構(gòu)建一個(gè)自主打造媲美?ElementPlus?的組件庫2023-10-10
這篇文章主要介紹了vue filter的四種用法小結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue組件代碼分塊和懶加載講解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中關(guān)于_ob_:observer的處理方式
這篇文章主要介紹了vue中關(guān)于_ob_:observer的處理方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue項(xiàng)目中token驗(yàn)證登錄(前端部分)
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目中token驗(yàn)證登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
本篇文章主要介紹了基于vue的換膚功能的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10