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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 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和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
php获取参数的几种方法总结
2014/02/18 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
web.py中调用文件夹内模板的方法
2014/08/26 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python与字符编码问题
2019/05/24 Python
Python3内置模块random随机方法小结
2019/07/13 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
学校课外活动总结
2014/05/08 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
法人代表证明书范本
2015/06/18 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
MySQL 查询速度慢的原因
2021/05/25 MySQL
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技