欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue單文件組件無(wú)法獲取$refs的問(wèn)題

 更新時(shí)間：2020年06月24日 08:30:18   作者：yunyuyuan  
這篇文章主要介紹了vue單文件組件無(wú)法獲取$refs的問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

記錄一下學(xué)習(xí)webpack+vue碰到的一個(gè)大坑，踩這個(gè)坑是我才疏學(xué)淺的表現(xiàn)，特此引以為戒。因?yàn)樵摽訉?shí)在是太坑了！

代碼

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是一個(gè)普通的彈窗組件。我在header.js中引入該組件，并實(shí)例化一個(gè)header_vue使用了popup組件，然后在other.js中引入header_vue試圖使用pop_data函數(shù)，該函數(shù)僅輸出header_vue的$refs，經(jīng)測(cè)試，該函數(shù)輸出為一個(gè)空的對(duì)象，但是mounted鉤子正常輸出。
我就很納悶，為啥mounted輸出正常，函數(shù)調(diào)用就成空的了呢，Vue也已經(jīng)掛載完成了啊。

resolve

一番氣急敗壞的debug后，在header.js的$(function())加上了一句console.log('ok')，結(jié)果瀏覽器輸出了倆ok。短時(shí)間大腦的高速運(yùn)轉(zhuǎn)后，我發(fā)現(xiàn)了問(wèn)題的所在:

webpack打包了兩遍header.js！
所以解決的辦法就是把header_vue = new Vue()改成window.header_vue = new Vue()。別處直接用就行了。

尾話

目前沒(méi)搞清楚具體的bug出現(xiàn)原因，正常使用webpack多次引入同一個(gè)export也沒(méi)有出現(xiàn)過(guò)此問(wèn)題。但是肯定是我沒(méi)學(xué)明白，有大牛知道的話麻煩解答解答。

到此這篇關(guān)于vue單文件組件無(wú)法獲取$refs的問(wèn)題的文章就介紹到這了,更多相關(guān)vue單文件無(wú)法獲取$refs 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論