vue如何通过元素找到属于哪个组件?

失落的额头
  • 132

vue开发过程中,需要给某个页面某个弹窗中的某个按钮修改样式,我如何快速找到这个按钮属于哪个组件?也就是说直接通过这个按钮找到该.vue文件,然后修改相应的样式。chrome自带调试工具可以吗? vue-devtools可以吗? 请问具体如何操作?

回复
阅读 1.6k
5 个回答

vue-devtool可以,点这个select按钮去页面选中就出来了
image

生产环境
  1. 选中DOM节点
  2. 打开开发者工具中的console,输入
$target = $0;
do {
  if ($target.__vue__) {
    console.log($target.__vue__);
    break;
  }
  $target = $target.parentNode;
}
while ($target);
开发环境

同生产环境方法,可以多获取到源文件的路径(前提是使用vue-loader编译)

$target.$options.__file

或者采用vue-devtools更为方便

如果这个组件有特殊css样式,或者特殊关键字,我觉得应该可以在开发工具里面全局搜索

我这边有个最佳实践:用 kebab-case 给组件添加样式。比如 SomeSpecialButton,那么它的 root 元素需要包含样式:.some-special-button,这样我就能快速定位它的位置了。

可以一级一级往上找具有__vue__属性的dom,这个__vue__就是包含该按钮的vue组件的实例,然后代码里全局搜一下实例的一些属性(比如name)就能找到

仅对vue2有效

你知道吗?

宣传栏