vue单文件组件无法获取$refs的问题


Posted in Javascript onJune 24, 2020

记录一下学习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 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
微信小程序获取用户openId的实现方法
May 23 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 #Javascript
javascript实现评分功能
Jun 24 #Javascript
javascript实现移动端红包雨页面
Jun 23 #Javascript
JS实现canvas简单小画板功能
Jun 23 #Javascript
javascript+Canvas实现画板功能
Jun 23 #Javascript
vue.js实现照片放大功能
Jun 23 #Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 #Javascript
You might like
php的memcached客户端memcached
2011/06/14 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
原生python实现knn分类算法
2019/10/24 Python
python右对齐的实例方法
2020/07/05 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
python 代码运行时间获取方式详解
2020/09/18 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
奥地利网上书店:Weltbild
2017/07/14 全球购物
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
初中数学教学反思
2014/01/16 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
基层党员公开承诺书
2014/05/29 职场文书
药品营销策划方案
2014/06/15 职场文书
信用卡收入证明范本
2015/06/12 职场文书
亲情作文之母爱
2019/09/25 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
opencv检测动态物体的实现
2021/07/21 Python