时间:2021-05-26
记录一下学习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 内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了vue组件父子间通信的具体代码,供大家参考,具体内容如下三、组件间通信($parent$refs)父组件要想获取子组件的数据:①在调用子组件
本文介绍了vue.js$refs和$emit父子组件交互的方法,分享给大家,废话不多说直接看代码:父调子$refs(把父组件的数据传给子组件)//hello组件
发现问题我们在给一个dom元素绑定方法的时候,例如:React组件中不能获取refs的值,页面报错提示:UncaughtTypeError:Cannotread
本文将详细介绍Vue单文件组件概述在很多Vue项目中,使用Vue.component来定义全局组件,紧接着用newVue({el:'#container'})在
最近面试,被问到一个题目,vue做一个按钮组件;当时只是说了一下思路,回来就附上代码。解决思路:通过父子组件通讯($refs和props)props接受参数,$