VueJS 自定义组件导入有时有效

Posted 2023-02-22

【中文标题】VueJS 自定义组件导入有时有效

【英文标题】：VueJS Custom Component Import Works Sometimes

【发布时间】：2021-03-15 22:21:20

【问题描述】：

我有一个 VueJS 组件 Image，导入到另外两个不同的组件 A 和 B。 Image 在 A 上按预期工作，但在 B 上不正常工作（我最初在 JS 控制台中收到 did you register the component? 错误）。 A 和 B 的 import 语句完全相同。

当我转到B 并更改Image 的导入语句以包含.vue 并保存时，应用程序会自动刷新并且B 上的所有内容都按预期工作。一旦我手动刷新浏览器，B 的Image 就不再工作了。

然后我将返回B，从Image 的导入语句中删除.vue 并保存，你瞧，应用程序会自动刷新，B 上的所有内容都按预期工作。再次，我手动刷新浏览器，B 的Image 不再起作用。

同时，A 继续工作，没有任何变化。

我在本地声明组件。我都试过了：

components: 
  Image

和

components: 
  "image": Image

两者都在B 上给了我相同的行为。也就是说，只需修改文件以使所有内容都“正确”然后保存，即可导致应用程序自动刷新，B 按预期工作。

但是，一旦我尝试直接在源代码控制之外运行应用程序，而不进行任何修改，B 就会停止工作。只有在更改某些内容然后保存后，它才能工作。

我很茫然。任何帮助表示赞赏。

【问题讨论】：

你能在codesanbox中分享一个简化版

@BoussadjraBrahim，不幸的是，我不能。从那以后，我发现其他具有相同问题的 SO 问题。它似乎与循环引用有关，但我认为我没有。

【参考方案1】：

您需要避免将保留关键字作为组件名称。 image 是保留的keyword。每当您在 Vue 中使用 <image>|<Image> 时，它都会呈现为 image，这是保留的。