情况1.是因为组件命名和引入不一致造成的。

  • 命名组件(nav)
export  default {
name: 'nav',
data () {
return { }
}
  • 引入组件(Navigation)
import Mnav from './common/Navigation'

改成一致后可解决该问题。

  • 命名组件(Navigation)
export  default {
name: 'Navigation',
data () {
return { }
}

情况2.两个大写英文单词书写

  • 引入时的命名(TestPage)
 import TestPage from './Details/testPage'
  • 使用时
<template>
<div class="detail">
<testpage></testpage>
</div>
</template>

改成使用时标签 test-page 即可

<template>
<div class="detail">
<test-page></test-page>
</div>
</template>

vue 渲染是出现 Do not use built-in or reserved HTML elements as component id 的警告的更多相关文章

  1. vue报错 Do not use built-in or reserved HTML elements as component id:header

    组件,不能和html标签重复 header组件,h5新标签重复 Do not use built-in or reserved HTML elements as component id:header ...

  2. Do not use built-in or reserved HTML elements as component id:mask vue报错

    今天学习了一下vue的组件,但是报了一个错误 Do not use built-in or reserved HTML elements as component id:mask , 经过查询得知是因 ...

  3. vue Do not use built-in or reserved HTML elements as component id: nav

    刚入坑vue 在新建组件的时候出现这个问题,原因是我新建的这个组件name: 'nav' 在vue中好像nav 这样的 有点类似于 “关键字” 不能作为组件的name,按照服务端来说 就是不可以命名关 ...

  4. vue中报错Do not use built-in or reserved HTML elements as component id details

    原因是定义了一个叫做details的comonent 跟现有的html网页中的标签重合 export default { name: 'details', data () { return { equ ...

  5. Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题

    错误示图: 原因:是因为在本地项目对应文件的<script>中,属性name出现了错误的命名方式,导致浏览器控制台报错! 诸如: name: header .  . name: menu  ...

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

    因为header在HTML5里面是个原生的标签,所以在开发的时候会提示错误,解决方法:修改components里面左边的header

  7. vue报错:[Vue warn]: Do not use built-in or reserved HTML elements as component id: header

    报错的信息大致是不要将内置或保留的HTML元素用作组件ID 解决的办法是修改name符合规范或者直接删除组件内的name属性.

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

    错误如下: 报错原因: 不能使用内建标签,组件不能和html标签重复. 解决办法: 把name改成mContent解决.

  9. VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i

    <script> export default {     name:'header'       //  不要使用内置或保留的HTML元素 , 改为Header或者置或保留的HTML元素 ...

随机推荐

  1. MAS多媒体的整个存储架构是怎样的?

    MAS多媒体的整个存储架构是怎样的?

  2. CentOS Linux修改默认Bash shell为Zsh shell

    Shell是在程序员与服务器间建立一个桥梁,它对外提供一系列命令,让我们得以控制服务器.常用的Bash就是Shell的一种,也是Linux下默认Shell程序.这里介绍一种更强大的.更人性化的Shel ...

  3. show slave status参数详解

    root@localhost (none)>show slave status\G *************************** 1. row ******************** ...

  4. FESCAR

    FESCAR:阿里重磅开源分布式事务解决方案 FESCAR名字的由来:Fast & EaSy Commit And Rollback FESCAR是啥? 被用在微服务架构中的高性能分布式事务解 ...

  5. JAVA重写不需要@override

    一,如下代码, package com.boot.enable.bootenable; import org.springframework.scheduling.annotation.Async; ...

  6. C# 从集合A中取出集合B中不包含的数据(根据ID判断),并添加到集合B中

    从一个集合A中取出另一个集合B中不包含的数据,并添加到集合B中 private void button2_Click(object sender, EventArgs e) { var ListA = ...

  7. Python类函数调用:missing 1 required positional argument

    在Python中,应该先对类进行实例化,然后在应用类.注意,实例化的过程是应该加括号的.

  8. npm学习(五)之使用package.json

    使用package.json 管理本地安装的npm包的最佳方法是创建一个package.json文件. 一个packagejson文件: 列出项目所依赖的包. 允许使用语义版本控制规则指定项目可以使用 ...

  9. 使用CXF开发WebService程序的总结(六):结合拦截器使用

    1. 使用CXF提供的拦截器 拦截器在我看来分为两端两向,两端分为:客户端和服务端,两向(方向)分为:进(in)和出(out),即大致四类拦截器. 在这里利用cxf提供的 日志拦截器举例 1.1 在服 ...

  10. 85. Maximal Rectangle (JAVA)

    Given n non-negative integers representing the histogram's bar height where the width of each bar is ...