前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue获取当前视图组件对象

vue获取当前视图组件对象

原创
作者头像
shirishiyue
发布2019-06-29 17:53:22
3.5K0
发布2019-06-29 17:53:22
举报
文章被收录于专栏:全栈码

想在console中调试查看vue对象的数据情况,奈何没有入口,全局的vue对象可以挂出来,但是没法定位到具体的视图对象。

全局vue对象可以这样暴露到window中,

代码语言:javascript
复制
...
app.$mount('#app');
...
typeof window!='undefined' && (window.vm = app);

路由页面,当前视图组件的vue对象怎么获取呢?由于我的视图组件都取了name名字,而且都规范化为'view-'开头的,因此可以这样干:

代码语言:javascript
复制
//---------------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 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档