vue單檔案元件無法獲取$refs的問題
阿新 • • 發佈：2020-06-24
記錄一下學習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。短時間大腦的高速運轉後，我發現了問題的所在:
webpack打包了兩遍header.js！
所以解決的辦法就是把header_vue = new Vue()改成window.header_vue = new Vue()。別處直接用就行了。
尾話
目前沒搞清楚具體的bug出現原因，正常使用webpack多次引入同一個export也沒有出現過此問題。但是肯定是我沒學明白，有大牛知道的話麻煩解答解答。
到此這篇關於vue單檔案元件無法獲取$refs的問題的文章就介紹到這了,更多相關vue單檔案無法獲取$refs 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！