实习总结——Vue components组件

最新推荐文章于 2023-06-01 17:16:16 发布
最新推荐文章于 2023-06-01 17:16:16 发布
阅读量228 收藏
点赞数
分类专栏： vue
原文链接：https://www.jb51.net/article/154102.htm
版权

1，组件引入未成功，console控制台报错：

[Vue warn]:Do not use built-in or reserved HTML elelments ascomponent id:dialog

不能用dialog做组件名，这个与html5新增的<dialog>标签重名了，把组件名改一下就行了比如dialog1。

[Vue warn]: Do not use built-in or reserved HTML elements as component id: header（与上面相同）

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

admvli2016
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
.eslintrc.js文件配置(关于eslint文件的设置)
m0_64393334的博客
04-26 1779
.eslintrc.js文件配置(关于eslint文件的设置)
EditorConfig + ESLint + Prettier 实现代码规范化
lhz_333的博客
08-22 1508
接上文，本文主要记录下如何实现代码规范化。
vscode报错vue/multi-word-component-names处理
weixin_64725948的博客
11-06 2982
vscode报错vue/multi-word-component-names处理
Vue的Component name报错
ENDlesslove0的博客
10-29 719
Vue的Component name报错
vsCode配置Eslint+Prettier结合使用详细配置步骤，规范化开发
JHLIN的博客
07-14 9489
Eslint+Prettier结合使用详细配置步骤，规范化开发
Vue侧滑菜单组件——DrawerLayout
10-18
本文介绍一个简单的DrawerLayout（类似Android的DrawerLayout）布局组件的实现，基于Vue.js侧滑菜单组件的实现代码大家通过本文一起学习吧
vue小组件 计算器小工具
02-09
vue小组件 计算器小工具
Vue异步组件使用详解
08-30
主要为大家详细介绍了Vue异步组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue复合组件实现注册表单功能
08-28
主要为大家详细介绍了vue复合组件实现注册表单功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
14_JavaWeb——Vue配套资源
05-09
此资源与我的博客14_JavaWeb——Vue中的案例配套，使用Vue简化了数据的查询和添加功能，希望能够有所帮助
eslint导致的报错解决
最新发布
qq_34761385的博客
06-01 1万+
当你利用脚手架在创建vue项目时，无脑创建下默认一定会安装eslint代码检测工具。那么你的噩梦就来了。eslint作为代码规范检测，不得不承认它的强大，但是绝对是会逼死一众强迫症患者。比如你只是简简单单运行一个vue项目，报错一大堆，是不是瞬间就头大了。不过，仔细看一下就知道，这种报错很明显就是eslint检测的结果。所以，对症下药。
vue3 - 异步组件 defineAsyncComponent 引入使用无效（Cannot read properties of undefined(reading ‘catch‘)）详细解决方案
高级前端工程师
02-19 2908
vue3报错Cannot read properties of undefined(reading 'catch')如何解决，vue3+vite 使用defineAsyncComponent动态异步引入组件出错，vue3 vite 异步组件 defineAsyncComponent 引入报错，VUE3+vite项目中动态引入组件与异步组件的详细实例，Vue3中defineAsyncComponent异步组件使用报错，vue3 - 异步组件 defineAsyncComponent 引入使用无效（Cannot
解决eslint检查报Definition for rule 'vue/component-definition-name-casing' was not found
段郎的博客
03-19 2万+
在使用eslint检查使用vue-property-decorator来辅助编写typescript的时候，出现了一个问题：如下 1:1 error Definition for rule 'vue/component-definition-name-casing' was not found vue/component-definition-name-casing 1:1 ...
vue开发之Do not use built-in or reserved HTML elements as component id: header
sinat_41694829的博客
06-20 382
刚刚在搭建项目时发现控制台报错 查找发现是因为组件名称所致，也就是当我们起名一个header.vue的组件时，我们安装的vue插件会自动把name设置为default 这就造成了错误 把header修改为headerNav就ok了！！当然你可以修改为任何你喜欢的名字，前提是不冲突 如果你的才华还实现不了你的野心，那就静下心来，埋头苦干。有志者事竟成破釜成舟百二秦关终属楚，苦心人天不负卧薪尝胆三...
Vue--》Vue3打造可扩展的项目管理系统后台的完整指南（三）
ztK63LrD的博客
05-31 1096
今天开始使用 vue3 + ts 搭建一个项目管理的后台，因为文章会将项目的每一个地方代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的GithHub上，大家可以自行去进行下载运行。
组件引入不进去的问题
perry
01-07 1014
vue 引入子组件报错问题
hellow_world_的博客
02-24 8240
错误信息:    Do not use built-in or reserved HTML elements as component id: header源码:&lt;script&gt; import header from "./components/header" import aside from "./components/aside" import footer from "./co...
vue引入组件无法显示且报错[Vue warn]: Do not use built-in or reserved HTML elements as component id: header
热门推荐
涂涂
12-19 3万+
一、Vue在引入组件后无法显示组件内容且报错如下： [Vue warn]: Do not use built-in or reserved HTML elements as component id: header 二、原因是vue里面不允许用特殊的标签来做自定义的标签比如你不能用a来接收一个组件的注册然后在以自定义标签的方式引用会被限制 三、解决方案 在component里面注册组件的时
vue中引入组件出现The “xxx“ component has been registered but not used vue/no-unused-components的原因
qq_40462272的博客
03-30 1万+
看格式没有问题。但是还是出错。 但是突然想起header是HTML5的元素，于是把header改为sellheader，运行成功。 所以自定义组件时要避免和已有元素标签同名。
vue3 components 引用组件
03-16
在Vue3中，引用组件的方式与Vue2有所不同。Vue3使用了新的组件注册方法createApp()，可以通过以下步骤引用组件： 1. 在组件文件中，使用export default导出组件对象。 2. 在父组件中，使用import语句引入子组件。 3. 在父组件中，使用createApp()方法创建Vue实例，并在components选项中注册子组件。 4. 在父组件的template中使用子组件的标签名即可引用子组件。 示例代码如下： // 子组件文件 ChildComponent.vue <template> <div>我是子组件</div> </template> <script> export default { name: 'ChildComponent' } </script> // 父组件文件 ParentComponent.vue <template> <div> <h1>我是父组件</h1> <ChildComponent /> </div> </template> <script> import ChildComponent from './ChildComponent.vue' import { createApp } from 'vue' export default { name: 'ParentComponent', components: { ChildComponent } } </script> // 在入口文件 main.js 中创建Vue实例 import ParentComponent from './ParentComponent.vue' import { createApp } from 'vue' createApp(ParentComponent).mount('#app') 在上述代码中，我们首先在子组件文件中导出了组件对象，并在父组件文件中使用import语句引入了子组件。然后，在父组件文件中使用createApp()方法创建Vue实例，并在components选项中注册了子组件。最后，在父组件的template中使用子组件的标签名ChildComponent即可引用子组件。在入口文件main.js中，我们创建了Vue实例并将其挂载到了页面上。 需要注意的是，在Vue3中，组件名不再需要使用kebab-case命名法，可以使用camelCase或PascalCase命名法。同时，组件的template选项也被废弃了，可以使用单文件组件的方式编写组件模板。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值