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

时间 2020-06-24

标签 vue 文件组件没法获取 refs 问题繁體版

原文原文链接

原文https://blog.phyer.cn/article/8369

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

代码html

header.html

vue

<body>
<div id="popup-wrap">
<popup ref="popup"></popup>
</div>
</body>

header.jswebpack

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.jsweb

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()`。别处直接用就好了。this

尾话

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