如何使用 Composition API 样式导航到 Vue3 项目中 WebStorm 中的父 Vue 组件

Question

自从迁移到 Vue3 并采用 Composition API 样式后，我在以前的模式（现在称为 Options API 样式）中开发时错过了一件小事情。在 WebStorm/IntelliJ IDE 中编辑组件时，您过去可以在“导出”关键字上按住命令单击 (Mac)，它会跳转到父组件，或显示导入/用法列表。

例如，此密码重置组件包含在登录页面中，因此单击其导出即可轻松到达那里。

现在使用设置脚本的 Composition API 样式无需显式导出，因此我找不到任何可单击的内容！

我知道我可以在文件上使用 Alt+F7 来查找文件引用，但这并不那么优雅，因为我必须先转到文件面板，然后加载文件搜索面板，然后我必须查看、点击并驳回。而且它不是面向 TS/JS 模块，而是面向文件，因此并不总是给出相同的结果。

这只是一个很小的遗漏，但我意识到我经常使用它，这确实减慢了我的工作流程。

Answer 1

我注意到适用于某些组件的方法是单击

defineProps()

中的属性定义，这会弹出属性的用法面板，包括模板中的引用以及在父级中设置的位置。

它工作得不太完美：

• 用于删除“this”引用的 ($) 按钮不会删除当前组件，正如人们所期望的那样。
• 父用法设置该道具应被检测为“写入访问”，但每个用法都被列为“读取”
• “动态使用”选项会选取不相关但相同的单词，并且似乎还引用了生成的代码（如 TS 中的 JS），所以我将其关闭。

因此，您似乎无法“仅调用引用”，并且如果没有定义任何属性，则无法使用它。