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

Question

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

Answer 1

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

Answer 2

生产环境

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更为方便

Answer 3

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

Answer 4

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

Answer 5

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

仅对vue2有效