浏览器f12控制台怎么获取vue实例,并且修改data数据

我们在日常的生产工作中,经常会遇到一些问题,比如,若产品已经部署,或是目前无法查看源代码,或者向用命令直接修改查询默认表单数据,那我们怎么去查看Vue实例呢?

我们在浏览器直接打印this不能得到Vue实例,因为在浏览器,this指向的是Windows。

获取Vue实例步骤

  1. 首先我们在浏览器端打开F12,找到Vue挂载的这个组件,获取到元素

这个有时候需要猜组件的结构,简单的组件测试,第一层Vue实例,一般挂载到id为app的元素上var vueEle = document.getElementById("app")

如果是子组件,可以先获取,然后看看有没有__vue__这个属性值,如果有,代表它挂载了Vue实例

  1. 然后我们用元素._vue_来打印这个Vue实例

    vueEle.vue

  1. 用 元素.vue.$data获取或者改变组件data数据

    vueEle.vue.$data

  1. 获取或改变组件data中某个变量的数据

    补充获取iframe中元素的方法
js 复制代码
document.getElementById("iframe000032").contentWindow.document.querySelector("#app")
相关推荐
锦木烁光12 小时前
多端项目太乱?我是这样用 Monorepo 重构的
前端·架构
早點睡39012 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-shadow-2
javascript·react native·react.js
上山打牛12 小时前
cornerstone3D基本使用
前端
阿鑫_99612 小时前
通用-Nvm基础知识
前端
xinzheng新政12 小时前
Javascript·深入学习基础知识
前端·javascript·学习
前端付豪12 小时前
实现记忆开关
前端·后端
前端开发呀13 小时前
约定式路由的极简主义实践:一个插件搞定 React/Vue × Vite/Rspack
前端
代码煮茶13 小时前
Vue3 插件开发实战 | 从 0 开发一个全局通知组件(Toast/Message)并发布到 npm
javascript·vue.js
程序员Ctrl喵13 小时前
Flutter 第三阶段:基础 Widget 全面指南
开发语言·javascript·flutter
我就是马云飞13 小时前
停更5年后,我为什么重新开始写技术内容了
android·前端·程序员