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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 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
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
Angular路由简单学习
2016/12/26 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
用Python编写简单的微博爬虫
2016/03/04 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
Python实现序列化及csv文件读取
2020/01/19 Python
关于Django Models CharField 参数说明
2020/03/31 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
美国NBA官方商店:NBA Store
2019/04/12 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
酒店销售主管岗位职责
2014/01/04 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
技术比武方案
2014/05/19 职场文书
销售员岗位职责范本
2015/04/11 职场文书