纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

yunyuyuan   2020-06-24 我要评论

本文着重讲解了vue单文件组件无法获取$refs的问题,文中通过代码实例讲解的非常细致对大家的学习或者工作具有一定的参考学习价值需要的朋友们下面随着小编来一起学习学习吧

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

代码

header.html

<body>
  <div id="popup-wrap">
    <popup ref="popup"></popup>
  <https://cdn9.52xs.com.cn/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也没有出现过此问题。但是肯定是我没学明白有大牛知道的话麻烦解答解答。


相关文章

猜您喜欢

  • JS实现数据动态渲染的竖向步骤条

    本文着重为大家仔细讲解了JS实现数据动态渲染的竖向步骤条文中代码实例讲解的非常细致希望能够帮助到您欢迎大家阅读和收藏..
  • Springboot全局异常捕获及try catch区别解析

    本文着重讲解了Springboot全局异常捕获及try catch区别解析,文中通过代码实例讲解的非常细致对大家的学习或者工作具有一定的参考学习价值,欢迎大家阅读和收藏..

网友评论

Copyright 2020 www.Shellfishsoft.com 【贝软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式