微客导航 » 文章资讯 » vue单文件组件无法获取$refs的问题

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

2023-07-22 14:15:04 299

记录一下学习webpack+vue碰到的一个大坑，踩这个坑是我才疏学浅的表现，特此引以为戒。因为该坑实在是太坑了！

代码

header.html

header.js

importpopupfrom'../../components/popup/popup.vue'
import'./header.scss'

letheader_vue;
$(function(){
header_vue=newVue({
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=newVue()改成window.header_vue=newVue()。别处直接用就行了。

尾话

目前没搞清楚具体的bug出现原因，正常使用webpack多次引入同一个export也没有出现过此问题。但是肯定是我没学明白，有大牛知道的话麻烦解答解答。

到此这篇关于vue单文件组件无法获取$refs的问题的文章就介绍到这了,更多相关vue单文件无法获取$refs内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐