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

4次阅读

共计 1042 个字符，预计需要花费 3 分钟才能阅读完成。

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

记录一下学习 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 也已经挂载完成了啊。

一番气急败坏的 debug 后，在 header.js 的$(function())加上了一句console.log('ok')，结果浏览器输出了俩 ok。短时间大脑的高速运转后，我发现了问题的所在: