【前端笔记】 Vue 报错: Do not use built-in or reserved HTML elements as component id: a

向着光芒的女孩

已于 2023-04-26 11:19:17 修改

阅读量864

点赞数

分类专栏：前端笔记文章标签： vue.js html javascript

于 2022-06-15 16:13:34 首次发布

本文链接：https://blog.csdn.net/ann295258232/article/details/125299120

版权

前端笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在这里插入图片描述
这是因为我在研究keep-alive缓存做demo的时候把组件的name命名为a了，a在html中是链接标签，vue组件的命名不要与原生的html标签相同，具体使用报错的例子为：

Vue.component("tab-home", {
  name: 'a',
  template: "<div>Home component<input type='text'/></div>"
});

特此记录一下，已提醒自己。

整体报错代码环境如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Components Example</title>
    <style>
      .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
      }
      .tab-button:hover {
        background: #e0e0e0;
      }
      .tab-button.active {
        background: #e0e0e0;
      }
      .tab {
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="dynamic-component-demo" class="demo">
      <button
        v-for="tab in tabs"
        v-bind:key="tab"
        v-bind:class="['tab-button', { active: currentTab === tab }]"
        v-on:click="currentTab = tab"
      >
        {{ tab }}
      </button>
      <keep-alive :include="['a','bn','cn']">
            <component v-bind:is="currentTabComponent" class="tab"></component>
      </keep-alve>
    </div>
    <script src="https://cn.vuejs.org/js/vue.js"></script>

    <script>
      Vue.component("tab-home", {
        name: 'a',
        template: "<div>Home component<input type='text'/></div>"
      });
      Vue.component("tab-posts", {
        name: 'bn',
        template: "<div>Posts component<input type='text'/></div>"
      });
      Vue.component("tab-archive", {
        name: 'cn',
        template: "<div>Archive component<input type='text'/></div>"
      });

      new Vue({
        el: "#dynamic-component-demo",
        data: {
          currentTab: "Home",
          tabs: ["Home", "Posts", "Archive"]
        },
        computed: {
          currentTabComponent: function() {
            return "tab-" + this.currentTab.toLowerCase();
          }
        }
      });
    </script>
  </body>
</html>