记录一下学习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也没有出现过此问题。但是肯定是我没学明白,有大牛知道的话麻烦解答解答。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue单文件组件无法获取$refs的问题”评论...
更新动态
2024年04月29日
2024年04月29日
- 4.6版本隐藏锚点位置一览,隐藏锚点在哪
- 群星.2024-追风者电视剧影视原声带【SONY】【FLAC分轨】
- 曾庆瑜.1992-18首中英文经典全集【派森】【WAV+CUE】
- 群星.1991-华纳浪漫心曲精丫华纳】【WAV+CUE】
- 幕府将军 Shogun
- 纳克鲁斯 Knuckles
- 特污兔《填空题》[FLAC/分轨][239.68MB]
- 陈奕迅《黑白灰》台湾版[WAV+CUE][400M]
- 群星《三大发烧女声》3CD[WAV+CUE][2G]
- 英雄传说闪之轨迹北方战役国际版 5月29日全球同步上市
- 仙剑世界风启测试定档5月31日 感受属于东方的浪漫幻想世界
- 元气骑士前传星界法师怎么玩 操控黑暗禁忌
- 物华弥新迷踪盘第二关怎么过 迷踪盘第二关通关方法
- 物华弥新迷踪盘第三关怎么过 迷踪盘第三关通关方法
- 物华弥新迷踪盘第四关怎么过 迷踪盘第四关通关方法