vue引入自定义组件时不能与element-UI组件名相同

最新推荐文章于 2024-03-25 17:42:59 发布
最新推荐文章于 2024-03-25 17:42:59 发布
阅读量937 收藏
点赞数
文章标签： vue.js vue-cli3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41920874/article/details/121272437
版权

踩坑记录：在vue文件中引入自定义组件cusComp时，将其命名为了：ElPagination，导致自定义组件总显示不了，只会显示一个默认el-pagination组件。

图1 引入自定义组件

 

图2 使用组件 

原因：<ElPagination>会被解析为<el-pagination>，正好与elementUI的组件el-pagination重名

解决：将ElPagination改为其他字符串

Fi n g e r t i p s
关注
element-ui前置，vue自定义组件传值，定义行为
W2398439780的博客
10-25 306
使用vue create命令创建项目选第三个 手动选择特性取消选择Linter选择vue2【对element-ui的支持更好】相关依赖记录到哪里去，选 packege.json存在配置作为快照？否创建好的项目拖进vscode打开HelloWorld.vue用不到，删掉App.vue 中 HelloWorld 的导入、注册、标签使用还有 vue logo 图片全删掉。
将自己写的组件封装成类似element-ui一样的库，可以cdn引入
andingran3462的博客
06-14 828
在写好自己的组件之后 第一步 修改目录结构 　　在根目录下创建package文件夹，用于存放你要封装的组件 第二部 　　在webpack配置中加入 　　pages与publicpath同级 　　pages: { 　　　　index: { 　　　　　　entry: 'src/main.js', 　　　　　　template: 'public/index.html', ...
vue:组件name名称不能重复
qq_44077052的博客
07-23 1695
组件name名称不能重复，不然无法加载。
【已解决】vue3+ts使用Element-Plus icon图标不显示|element plus 使用 icon 图标教程
最新发布
肥晨开发的学习之路
03-25 9369
Element Plus 的图标组件也支持自定义图标。你可以通过 el-icon 组件的 name 属性来指定一个自定义图标的类名，并在你的 CSS 中定义这个类名对应的图标样式。/* 或者使用字体图标 *//* 其他样式 */确保你的自定义图标样式正确无误，并且图标的路径也是正确的。如果你使用的是字体图标，你可能需要设置 font-family 和其他相关属性。您好，我是肥晨。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
vue组件和vue中的同名问题：
weixin_59856312的博客
02-13 2178
组件的概念：通俗的来理解，组件就是一个功能模块，组件是可以复用的vue的一个实列，并且带有一个名字考虑的问题：提升组件的复用性，降低组件之间耦合性 加强内聚。
[Vue3] 组件上的ref不能与组件名相同
weixin_44899044的博客
04-19 844
例如，如果一个组件名为"my-component"，而在该组件中使用ref="my-component"，则可能会导致意外的结果，因为ref实际上是一个指向组件实例的引用，而不是一个字符串。为了避免这种情况，建议在组件上使用不同的ref名称，例如ref="myRef"或ref="componentRef"。在Vue3中，组件上的ref不能与组件名相同。这是因为组件名在Vue3中被视为一个特殊的属性，用于标识组件的名称。如果将ref命名为组件名，可能会导致命名冲突或意外的行为。
element-ui组件table实现自定义筛选功能的示例代码
10-17
在本文中，我们将深入探讨如何使用element-ui组件库中的table组件实现一个自定义的筛选功能。element-ui是一个流行的Vue组件库，它提供了各种各样的UI组件，以帮助开发者快速构建高质量的Web界面。其中，table组件是...
vue-i18n结合Element-ui的配置方法
10-16
文章建议参考Element-ui的官方文档，并按照文档描述的方法来实现Element-ui组件的多语言切换。 为了整合国际化文件，作者建议在i18n.js文件中合并Element-ui和自定义的国际化文件，并使用Object.assign方法将它们的...
Vue中正确使用Element-UI组件的方法实例
10-14
Vue.js 是一款流行的前端框架，而 Element-UI 是一套基于 Vue 的组件库，提供了一系列丰富的 UI 组件，如表格、按钮、下拉菜单等，帮助开发者快速构建美观且响应式的用户界面。在 Vue 项目中正确使用 Element-UI，...
VUE.js+element-ui实现JSON编辑器
02-17
而Element-UI则是一套基于Vue.js的组件库，提供了丰富的UI组件，帮助开发者快速构建美观的Web应用界面。在本项目“VUE.js+element-ui实现JSON编辑器”中，我们将探讨如何利用这两者来创建一个在线的JSON编辑工具。 ...
自定义组件中引入element-ui/packages/scrollbar 报错
cuiyuchen111的博客
06-25 681
在vue.config.js中module.exports添加。
对于vue项目更加规范的思考------组件文件的命名和组件命名以及组件使用时的命名
imkaifan的博客
12-30 596
对于vue项目更加规范的思考------组件文件的命名和组件命名以及组件使用时的命名
前端那些事20231213-vue文件命名的时候和引入的组件一致就会报错
qq_41632427的博客
02-26 377
vue文件命名的时候和引入的组件一致就会报错。
若依项目的项目名称自定义修改
热门推荐
Kyle的博客
04-07 1万+
若依项目的项目名称自定义修改简介项目结构修改方式1. 修改项目名称2. 修改模块名称3. 修改Pom文件4. 修改磁盘项目文件夹名称 简介 因毕设来进行后台管理的设计，发现若依: ruoyi.是个不错的开源框架，因此想在这个框架的基础上进行开发，但开发时首先面临了一个修改项目名称的问题，之前都是自己手动创建的，比较少的面对路径修改的问题，特此记录一下。 项目结构 在idea中打开： 修改方式 1. 修改项目名称 通过 File->Project Structure 打开项目管理 这里示例修改为 d
element plus 引入icon
qq_42949209的博客
04-29 5840
vue升级到3版本后，引入的element 就是element plus了 不管是从官方文档还是自己使用过程中突然发现element plus引入icon是需要单独去引用的，其实说实话有点鸡肋，不明白为什么单独引用。 废话不多说，上解决办法 1、全局引入 main.js 引入 import * as ElIcons from "@element-plus/icons-vue"; for (const iconName in ElIcons) { vue.component(iconName,
Vue中使用的组件名称与html的标签名字重复
pon的博客
03-30 3487
在开发项目中，我们需要创建许多组件，特别要注意的一点是，我们在引用组件使用时，名字千万不要与html中的标签重名，如果出现重名的情况，vue将不知道你使用是vue组件还是HTML标签页，举个栗子： 我们在home组件中引用我们自定义的组件header，由于html中已经存在header标签了，所以当你在home组件中再使用自定义的组件 ,vue就会默认为你写的是html标签，这样的话，你自定义的组......
Vue插槽的使用（匿名插槽、具名插槽、作用域插槽）以及ElementUI中table-column的slot-scope应用（scope.row、scope.$index、scope.column）
昔冰_G的博客
02-17 8588
先说说插槽的使用：（才疏学浅，白话表述）可以把插槽理解为组件B中留下的一个坑，谁用这个坑谁就可以往里面填放东西，同时呢，谁也就要认组件B做儿子-----组件B也就成了这个来填坑的组件的子组件。 插槽不单单是可以让父组件用它填充东西，也可以引用子组件的数据，而父组件用坑的时候也就可以用子组件传过来的数据。 单个插槽（默认插槽、匿名插槽） 子组件：(slotdemoson.vue) <template> <div> <h2>子组件<..
VUE项目中同时引入Antd 和ElementUI 组件样式异常解决方案
weixin_48181168的博客
12-13 9517
根据需求同时引入了Antd 和 ElementUI 导致部分地方组件使用Antd的$confirm 和$message组件时，由于elementUI中也存在同名的组件，导致页面样式异常。 直接引用element,组件显示会报错. 给antd的组件改名 Vue.use(Antd) Vue.prototype.$antdconfirm = Vue.prototype.$confirm 使用的时候： this.$antdconfirm({.... 修改之后,显示的效果: ...
Element组件被Antd覆盖 解决办法
童童童彤
09-24 2246
在一个项目里引了两个组件库，第一个引入的组件库有的时候就会被覆盖掉，导致不能使用，这是因为后引入的组件库会将前一个覆盖掉（组件名称重复的情况下），所以样式和使用方法都会出现问题，导致第一个引入的组件库部分不能使用，在一个项目里建议是只引入一个组件库。当然啦，如果引入两个组件库也不是没有办法的，可以在src下面的main.js文件中进行更改来实现两个组件在一个项目里都可以使用。 就比如说Vue.prototype.$message和Vue.prototype.$confirmElement和Antd都是相同的
Vue2.0自定义权限树组件：从Element-UI三级到四级横向布局实现
在Vue2.0项目中，使用饿了么的Element-UI库构建了一个自定义权限树组件，以解决特定的业务需求。...通过自定义组件，开发者能够更好地适应项目中的特殊业务场景，同时也锻炼了对Vue框架和Element-UI库的深入理解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值