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 面向对象的5钟写法
Jul 31 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
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命名空间namespace用法实例分析
2016/09/27 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
JS分页效果示例
2013/10/11 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python入门教程之运算符与控制流
2016/08/17 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
环保建议书
2014/03/12 职场文书
学校党员对照检查材料
2014/08/28 职场文书
公司委托书格式范文
2014/10/09 职场文书
社区节水倡议书
2015/04/29 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
Python软件包安装的三种常见方法
2022/07/07 Python