想在console中调试查看vue对象的数据情况,奈何没有入口,全局的vue对象可以挂出来,但是没法定位到具体的视图对象。
全局vue对象可以这样暴露到window中,
...
app.$mount('#app');
...
typeof window!='undefined' && (window.vm = app);
路由页面,当前视图组件的vue对象怎么获取呢?由于我的视图组件都取了name名字,而且都规范化为'view-'开头的,因此可以这样干:
//---------------commMixins.js--------------
var exportObj = {}
//1. 浏览器暴露当前组件对象引用,方便用于调试。只暴露视图vue对象(name为view-开头的),视图里面的子组件就不要暴露了
exportObj.consoleExpose = {
mounted () {
if(typeof window=='undefined' || typeof window.document=='undefined' ||
!this.$options || !this.$options.name || this.$options.name.indexOf('view-')!==0
){
return;
}
window.cvm = this; //暴露当前视图的vue对象到window全局中
}
}
export default exportObj;
//---------------app.js--------------
import comMixins from 'src/comm/mixins/comMixins.js'
for(var i in comMixins){
if(comMixins.hasOwnProperty(i)){
Vue.mixin(comMixins[i]);
}
}
然后,我们就可以在控制台中,查看当前视图对象的数据了
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。