Vue 實例中使用$refs的注意事項
在開發(fā)過程中，經(jīng)常會通過實例的vm.$refs(this.$refs)取得通過ref注冊過的組件，并進行相應操作，但存在取不到元素的情況，其根本原因是因為$refs只能取得mounted（渲染）之后的元素。
例如，在這種情況中，若flag從真值切換到假值取不到節(jié)點是正常的，因為v-if如果為假值，那么該節(jié)點不會被渲染。
但如果從假值切換到真值時，也可能取不到節(jié)點，這是因為渲染需要時間，通?？梢允褂?nextTick()解決。
...
<el-table v-if="flag" ref="table">
<el-table-column prop="prop1"></el-table-column>
<el-table-column prop="prop2"></el-table-column>
</el-table>
...
export default {
methods: {
this.$refs.table.XXX()
}
}
但存在一個極特殊的情況，第一次頁面渲染的時候，$refs也取不到值。這個時候就要考慮v-show進行組件元素的隱藏與展示。
因為v-show是通過css的display:none進行隱藏控制，所以一開始就會渲染，肯定能夠取到元素
補充：Vue.js中ref ($refs)用法舉例總結及應注意的坑
一、根據(jù)官方文檔總結的用法：
看Vue.js文檔中的ref部分，自己總結了下ref的使用方法以便后面查閱。
1、ref使用在外面的組件上
HTML 部分
<div id="ref-outside-component" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"> </component-father> <p>ref在外面的組件上</p> </div>
js部分
var refoutsidecomponentTem={
template:"<div class='childComp'><h5>我是子組件</h5></div>"
};
var refoutsidecomponent=new Vue({
el:"#ref-outside-component",
components:{
"component-father":refoutsidecomponentTem
},
methods:{
consoleRef:function () {
console.log(this); // #ref-outside-component vue實例
console.log(this.$refs.outsideComponentRef); // div.childComp vue實例
}
}
});
2、ref使用在外面的元素上
HTML部分
<!--ref在外面的元素上--> <div id="ref-outside-dom" v-on:click="consoleRef" > <component-father> </component-father> <p ref="outsideDomRef">ref在外面的元素上</p> </div>
JS部分
var refoutsidedomTem={
template:"<div class='childComp'><h5>我是子組件</h5></div>"
};
var refoutsidedom=new Vue({
el:"#ref-outside-dom",
components:{
"component-father":refoutsidedomTem
},
methods:{
consoleRef:function () {
console.log(this); // #ref-outside-dom vue實例
console.log(this.$refs.outsideDomRef); // <p> ref在外面的元素上</p>
}
}
});
3、ref使用在里面的元素上---局部注冊組件
HTML部分
<!--ref在里面的元素上--> <div id="ref-inside-dom"> <component-father> </component-father> <p>ref在里面的元素上</p> </div>
JS部分
var refinsidedomTem={
template:"<div class='childComp' v-on:click='consoleRef'>" +
"<h5 ref='insideDomRef'>我是子組件</h5>" +
"</div>",
methods:{
consoleRef:function () {
console.log(this); // div.childComp vue實例
console.log(this.$refs.insideDomRef); // <h5 >我是子組件</h5>
}
}
};
var refinsidedom=new Vue({
el:"#ref-inside-dom",
components:{
"component-father":refinsidedomTem
}
});
4、ref使用在里面的元素上---全局注冊組件
HTML部分
<!--ref在里面的元素上--全局注冊--> <div id="ref-inside-dom-all"> <ref-inside-dom-quanjv></ref-inside-dom-quanjv> </div>
JS部分
Vue.component("ref-inside-dom-quanjv",{
template:"<div class='insideFather'> " +
"<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
" <p>ref在里面的元素上--全局注冊 </p> " +
"</div>",
methods:{
showinsideDomRef:function () {
console.log(this); //這里的this其實還是div.insideFather
console.log(this.$refs.insideDomRefAll); // <input type="text">
}
}
});
var refinsidedomall=new Vue({
el:"#ref-inside-dom-all"
});
二、應注意的坑
1、如果通過v-for 遍歷想加不同的ref時記得加 :號，即 :ref =某變量 ;
這點和其他屬性一樣，如果是固定值就不需要加 :號，如果是變量記得加 :號
2、通過 :ref =某變量 添加ref（即加了:號） ,如果想獲取該ref時需要加 [0]，如this.$refs[refsArrayItem] [0]；如果不是:ref =某變量的方式而是 ref =某字符串時則不需要加，如this.$refs[refsArrayItem]
加和不加[0]的區(qū)別--未展開
加和不加[0]的區(qū)別--展開了
3、想在element ui 對話框打開后取dom時，應該使用$nextTick，而不是直接使用this.$refs. imgLocal2：
console.log('this.$refs.imgLocal2外面', this.$refs.imgLocal2);
setTimeout(() => {
console.log('this.$refs.imgLocal2 setTimeout', this.$refs.imgLocal2);
}, 500); // 不推薦
this.$nextTick(() => {
console.log('this.$refs.imgLocal2 $nextTick', this.$refs.imgLocal2);
});
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。如有錯誤或未考慮完全的地方，望不吝賜教。
相關文章
這篇文章主要介紹了vue項目之index.html如何引入JS文件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue切換Tab動態(tài)渲染組件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要給大家介紹了關于Vue實現(xiàn)模糊查詢的簡單方法,在vue中,前端模糊搜索主要是用computed屬性實現(xiàn),本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了keep-alive不能緩存多層級路由菜單問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了vue移動端下拉刷新和上拉加載的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了Vue預覽圖片和視頻的幾種實現(xiàn)方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了詳解VueJS 數(shù)據(jù)驅動和依賴追蹤分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
VueQuillEditor富文本上傳圖片(非base64)
這篇文章主要介紹了VueQuillEditor富文本上傳圖片(非base64),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
在vue+element-plus中無法同時使用v-for和v-if的問題及解決方法
由于路由中存在不需要遍歷的數(shù)據(jù)所以像用v-if來過濾，但是報錯，百度說vue不能同時使用v-if和v-for，今天小編給大家分享解決方式，感興趣的朋友跟隨小編一起看看吧2023-07-07
這篇文章主要介紹了基于vue 實現(xiàn)token驗證的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-12-12