vue中的ref和$refs的使用
ref:被用來(lái)給元素或子組件注冊(cè)引用信息,引用信息將會(huì)注冊(cè)在父組件的$refs對(duì)象上。如果在普通的DOM元素上使用,那么指向的就是普通的DOM元素。
ref 有三種用法:
1、ref 加在普通的元素上,用this.ref.name 獲取到的是dom元素
2、ref 加在子組件上,用this.ref.name 獲取到的是組件實(shí)例,可以使用組件的所有方法。
3、如何利用 v-for 和 ref 獲取一組數(shù)組或者dom 節(jié)點(diǎn)
普通的DOM元素上使用
<div id="app7"> <input type="text"ref="TEXT"/ > <button @click="add">添加</button> </div>
var app7=new Vue({ el:"#app7", data:{ }, methods:{ add:function(){ console.log(this.$refs); } } })
子組件上使用
<div id="app7"> <aaa ref=inputText></aaa> <input type="text"ref="TEXT" > <button @click="add">添加</button> </div>
Vue.component('aaa',{ template:"<div>我是一個(gè)組件</div>" }) var app7=new Vue({ el:"#app7", data:{ }, methods:{ add:function(){ console.log(this.$refs.inputText); console.log(this.$refs); } } }) var aaa=app7.$refs.inputText; //console.log(aaa); //console.log(aaa.$el.innerText);
$refs:一個(gè)對(duì)象,持有注冊(cè)過(guò) ref 特性 的所有 DOM 元素和組件實(shí)例
注意:$refs只會(huì)在組件渲染完成之后生效,并且它們不是響應(yīng)式的。這只意味著一個(gè)直接的子組件封裝的“逃生艙”——你應(yīng)該避免在模板或計(jì)算屬性中訪問(wèn) $refs
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法
這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法,需要的朋友可以參考下2022-03-03vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件
本篇文章主要介紹了vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08vue實(shí)現(xiàn)自定義表格工具擴(kuò)展
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義表格工具擴(kuò)展,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue之webpack -v報(bào)錯(cuò)解決方案總結(jié)
這篇文章主要介紹了vue之webpack -v報(bào)錯(cuò)解決方案總結(jié),本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開(kāi)發(fā),路由配置方式
今天小編就為大家分享一篇vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開(kāi)發(fā),路由配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vite搭建vue2項(xiàng)目的實(shí)戰(zhàn)過(guò)程
自從體驗(yàn)了一下vite之后,真的太快了,然而對(duì)vue3還不是很熟練,就想著在vue2的項(xiàng)目中使用以下vite,下面這篇文章主要給大家介紹了關(guān)于vite搭建vue2項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-11-11