vue中的ref和$refs的使用
ref:被用來給元素或子組件注冊引用信息,引用信息將會注冊在父組件的$refs對象上。如果在普通的DOM元素上使用,那么指向的就是普通的DOM元素。
ref 有三種用法:
1、ref 加在普通的元素上,用this.ref.name 獲取到的是dom元素
2、ref 加在子組件上,用this.ref.name 獲取到的是組件實例,可以使用組件的所有方法。
3、如何利用 v-for 和 ref 獲取一組數(shù)組或者dom 節(jié)點
普通的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>我是一個組件</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:一個對象,持有注冊過 ref 特性 的所有 DOM 元素和組件實例
注意:$refs只會在組件渲染完成之后生效,并且它們不是響應式的。這只意味著一個直接的子組件封裝的“逃生艙”——你應該避免在模板或計算屬性中訪問 $refs
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vuejs使用FormData實現(xiàn)ajax上傳圖片文件
本篇文章主要介紹了vuejs使用FormData實現(xiàn)ajax上傳圖片文件,具有一定的參考價值,有興趣的可以了解一下2017-08-08詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-02-02vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開發(fā),路由配置方式
今天小編就為大家分享一篇vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開發(fā),路由配置方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11