解决 VUE： [Vue warn]: Do not use built-in or reserved HTML elements as component id: xx

朱雀 2022-04-23 08:32 150阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

1. 新增一个组件，运行无问题，但F12报错：

vue.esm.js?efeb:591 [Vue warn]: Do not use built-in or reserved HTML elements as component id: article

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70][]

2. 原因：

我这个组件名命名不规范。感觉是类似 java 保留字、关键字一样的东西。  不允许使用这个作为组件名。

3. 解决：给组件换个名字就可以了。

4. 附：

我是在组件中给了name 属性：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1][]

看到网上有的人在组件定义时不给 name 属性，在别的地方引用时再重命名就可以了。

如下, 用 v-header 来代替原本的 header 这个名字。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 3][]

此方法出自：[https://blog.csdn.net/qq\_34645412/article/details/78846782][https_blog.csdn.net_qq_34645412_article_details_78846782]

[Link 1]: https://www.captainai.net/jiangyu1013/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70]: /images/20220322/4f1a3bfd98764cf2aff792cf8697650e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1]: /images/20220322/70c2e6dfcd8e48be980bf7234a9122c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2]: /images/20220322/b9cd03f0f64245d1be4dd192d8743563.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 3]: /images/20220322/3436de6dfc0048f4b5d669009cd41a8a.png
[https_blog.csdn.net_qq_34645412_article_details_78846782]: https://blog.csdn.net/qq_34645412/article/details/78846782