首页 >> js开发 >> jsvue单文件组件无法获取$refs的问题js大全
jsvue单文件组件无法获取$refs的问题js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
记录一下学习webpack+vue碰到的一个大坑,踩这个坑是我才疏学浅的表现,特此引以为戒。因为该坑实在是太坑了!代码
代码
header.html
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}
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()
});
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
resolveresolve一番气急败坏的debug后,在header.js的$(function())加上了一句console.log('ok'),结果浏览器输出了俩ok。短时间大脑的高速运转后,我发现了问题的所在:webpack打包了两遍header.js!
所以解决的办法就是把header_vue = new Vue()改成window.header_vue = new Vue()。别处直接用就行了。尾话
尾话
尾话
目前没搞清楚具体的bug出现原因,正常使用webpack多次引入同一个export也没有出现过此问题。但是肯定是我没学明白,有大牛知道的话麻烦解答解答。
代码
header.html
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}
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()
});
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
resolveresolve一番气急败坏的debug后,在header.js的$(function())加上了一句console.log('ok'),结果浏览器输出了俩ok。短时间大脑的高速运转后,我发现了问题的所在:webpack打包了两遍header.js!
所以解决的办法就是把header_vue = new Vue()改成window.header_vue = new Vue()。别处直接用就行了。尾话
尾话
尾话
目前没搞清楚具体的bug出现原因,正常使用webpack多次引入同一个export也没有出现过此问题。但是肯定是我没学明白,有大牛知道的话麻烦解答解答。
相关文章:
- jsvue+element-ui JYAdmin后台管理系统模板解析js大全
- js解决vue bus.$emit触发第一次$on监听不到问题js大全
- jsvue 遮罩层阻止默认滚动事件操作js大全
- jsvue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)js大全
- js代码JavaScript 监听组合按键思路及代码实现
- JavaScriptvue.js 解决v-model让select默认选中不生效的问题
- jsvue中touch和click共存的解决方式js大全
- js解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题js大全
- js解决vue中的无限循环问题js大全
- js在vue中使用防抖函数组件操作js大全