vue單文件組件無法獲取$refs的問題
記錄一下學習webpack+vue碰到的一個大坑，踩這個坑是我才疏學淺的表現，特此引以為戒。因為該坑實在是太坑了！
代碼
header.html
<body>
<div id="popup-wrap">
<popup ref="popup"></popup>
</div>
</body>
header.js
import popup from '../../components/popup/popup.vue'
import './header.scss'
let header_vue;
$(function () {
header_vue = new Vue({
el: '#popup-wrap',
data: {
},
mounted: {
// 輸出為{popup: VueComponent}
console.log(this.$refs);
}
components: {popup},
methods: {
pop_data: function () {
// 輸出為{}
console.log(this.$refs);
}
}
});
});
export {header_vue}
other.js
import {header_vue} from "../header/header";
$(function () {
header_vue.pop_data()
});
popup.vue是一個普通的彈窗組件。我在header.js中引入該組件，并實例化一個header_vue使用了popup組件，然后在other.js中引入header_vue試圖使用pop_data函數，該函數僅輸出header_vue的$refs，經測試，該函數輸出為一個空的對象，但是mounted鉤子正常輸出。
我就很納悶，為啥mounted輸出正常，函數調用就成空的了呢，Vue也已經掛載完成了啊。
resolve
一番氣急敗壞的debug后，在header.js的$(function())加上了一句console.log('ok')，結果瀏覽器輸出了倆ok。短時間大腦的高速運轉后，我發(fā)現了問題的所在:
webpack打包了兩遍header.js！
所以解決的辦法就是把header_vue = new Vue()改成window.header_vue = new Vue()。別處直接用就行了。
尾話
目前沒搞清楚具體的bug出現原因，正常使用webpack多次引入同一個export也沒有出現過此問題。但是肯定是我沒學明白，有大牛知道的話麻煩解答解答。
到此這篇關于vue單文件組件無法獲取$refs的問題的文章就介紹到這了,更多相關vue單文件無法獲取$refs 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue實現折疊展開收縮動畫,通過scrollHeight實現,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2023-11-11
這篇文章主要為大家詳細介紹了如何使用Vue實現超酷文字上下滾動動畫,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下2024-03-03
這篇文章主要為大家分享了vue多級多選菜單組件開發(fā)案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
vue tab滾動到一定高度,固定在頂部,點擊tab切換不同的內容操作
這篇文章主要介紹了vue tab滾動到一定高度,固定在頂部,點擊tab切換不同的內容操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了vue實現圖片切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了Vue3使用el-table組件實現分頁、多選以及回顯功能,文中通過代碼示例介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-09-09
這篇文章主要為大家展示了一個demo，即利用Vue和OpenLayer在地圖上面添加風場效果，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-04-04
vue報錯之exports is not defined問題的解決
這篇文章主要介紹了vue報錯之exports is not defined問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue組件傳值的實現方式,結合實例形式總結分析了vue.js組建傳值的三種實現方式,包括父傳子、子傳父及非父子傳值,需要的朋友可以參考下2020-02-02
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們日常開發(fā)中，表格業(yè)務基本是必不可少的，對于老手來說確實簡單，家常便飯罷了，但是對于新手小白如何最快上手搞定需求呢？本文從思路開始著手，幫你快速搞定表格2022-11-11