解决Do not use built-in or reserved HTML elements as component id: Header问题

责编:menVScode 2017-10-29 21:54 阅读(3176)

运行下方的vue组件代码代码,发现控制台报如下的错误:

[Vue warn]: Do not use built-in or reserved HTML elements as component id: Header

这是因为 components 对象里的 Header,是 html5 原生的标签,将其改成 WebHeader即可。在这里要注意命名的时候,一定要避免与原生标签重名。

<template>
  <div id="app">
    <Header></Header>
    <button @click="$router.go(-1)">返回</button>
    <p>默认显示的内容</p>
    <router-view/>
  </div>
</template>

<script>
    import Header from './components/Header.vue'
    export default {
      name: 'app',
      components:{
          Header
      }
    }
</script>

改称 WebHeader 后的代码:

<template>
  <div id="app">
    <WebHeader></WebHeader>
    <button @click="$router.go(-1)">返回</button>
    <p>默认显示的内容</p>
    <router-view/>
  </div>
</template>

<script>
    import WebHeader from './components/Header.vue'
    export default {
      name: 'app',
      components:{
          WebHeader
      }
    }
</script>
标签: component vuejs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码