vue中的ref和$refs的使用
更新時間：2018年11月22日 14:38:56 作者：隨她
這篇文章主要介紹了vue中的ref和$refs的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
ref：被用來給元素或子組件注冊引用信息，引用信息將會注冊在父組件的$refs對象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。
ref 有三種用法：
1、ref 加在普通的元素上，用this.ref.name 獲取到的是dom元素
2、ref 加在子組件上，用this.ref.name 獲取到的是組件實例，可以使用組件的所有方法。
3、如何利用 v-for 和 ref 獲取一組數組或者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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue.js 的內聯表達式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。這篇文章給大家介紹了Vue.js教程之計算屬性，非常不錯，感興趣的的朋友一起看看吧2016-11-11
這篇文章主要給大家介紹了關于vue2項目中封裝echarts地圖的優(yōu)雅方法,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了vue簡易記事本的開發(fā)過程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
本篇文章主要介紹了vuejs使用FormData實現ajax上傳圖片文件，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了Vue中使用echarts的方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細介紹了vue實現自定義表格工具擴展，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue之webpack -v報錯解決方案總結,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
vue2.0 獲取從http接口中獲取數據,組件開發(fā),路由配置方式
今天小編就為大家分享一篇vue2.0 獲取從http接口中獲取數據,組件開發(fā),路由配置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
自從體驗了一下vite之后,真的太快了,然而對vue3還不是很熟練,就想著在vue2的項目中使用以下vite,下面這篇文章主要給大家介紹了關于vite搭建vue2項目的相關資料,需要的朋友可以參考下2022-11-11