在vue中子组件和父组件的使用,子组件的命名需要规范，否则不能通过编译打包。

最新推荐文章于 2023-07-09 16:34:35 发布
最新推荐文章于 2023-07-09 16:34:35 发布
阅读量255 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59173884/article/details/124926664
版权

在创立子组件时，由于大家会把子组件的名字随意的起名，导致整个项目不能通过编译打包，例如一下图片：

                                                                    图1

                                                                   图2

图1里面是我命名的子组件名字，图2是VScode给出的错误提示，意思是说你的子组件命名不规范，而正确规范命名是大驼峰式，例如："MyBag.vue"；这样才能编译打包。一下两个图是修改过后并运行成功。

                                                                  图3

                                                                  图4

 

 

m0_59173884
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue子组件修改父组件值
西格玛猫
02-23 717
父组件 <template> <div> <Child :obj="obj" /> </div> <template> <script> import Child from './Child ' export default{ components: {Child }, data() { return { obj:{ a:1, b:2 } } } } </script>
Vue学习笔记(三) 全局/局部组件、父子组件、组件命名注意点
weixin_44147960的博客
12-13 589
六、组件(全局 / 局部) 6.1 全局组件 1.创建组件构造器 注意：组件模板要有根元素包裹 // peofile是组件构造器名称 let profile = Vue.extend({ template: ` <div> <p>我是组件我是组件</p> </div> ` }) 2.注册组件 Vue.comp...
关于vue中子组件使用
weixin_43194434的博客
10-26 1703
vue中定义子组件以及在其他组件中使用记载 首先 ，定义一个子组件,然后把它暴漏出去。例如 定义一个name为 btns的子组件： &amp;lt;template&amp;gt; &amp;lt;button&amp;gt;111111&amp;lt;/button&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;gt; export default {
组件命名不规范带来的问题
@微你
01-03 583
想要在Movie组件中加一个头部header和一个底部tabbar,但是遇到了问题，如下： 在引入header组件时，该有的步骤都有，检查路径也没有问题，但是显示报错信息：‘The “header” component has been registered but not used.’。tabbar可以正常显示。 于是，我尝试将header组件的首字母大写，也就是改为Header，之后发现问题解决了，header和tabbar正常显示。 然后我就想应该是组件命名的问题，所以，在命名组件时，尽量按照官
Vue 规范
xuewenjie0217的博客
04-08 846
Vue 规范 vue 项目规范以 Vue 官方规范 中的 A、B、C 规范为基础，并根据实际项目特点略作调整，故应结合两者来执行规范。 重点强调 1、组件 （1）组件名 组件名应该始终是多个单词组成（大于等于 2），且命名规范为 PascalCase 格式，避免和 HTML 元素名称冲突。 // components/HeaderComponent.vue export default { name: 'HeaderComponent', // ... } （2）组件文件名 组件文件名为 Pasc
vue 父组件通过$refs获取子组件的值和方法详解
10-16
总结来说，Vue 父组件通过 `$refs` 获取子组件的值和方法是一种直接的通信方式，适用于某些场景，如需在父组件中直接调用子组件的方法或获取实时状态。但通常，推荐使用更灵活且易于维护的通信方式，如 props、事件...
vue里面父组件修改子组件样式的方法
08-28
下面小编就为大家分享一篇vue里面父组件修改子组件样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中如何让子组件修改父组件数据
08-27
主要介绍了vue中子组件修改父组件数据的相关资料，文中介绍了vue中watch的认识，关于子组件修改父组件属性认识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
在Vue.js中，数据流动通常遵循单向数据流原则，即数据从父组件流向子组件，但不直接从子组件反向修改。然而，有时子组件确实需要改变来自父组件的某些属性，这时可以通过`v-bind`的修饰符`sync`来实现数据的双向绑定...
vue中子组件传递数据给父组件的讲解
10-17
今天小编就为大家分享一篇关于vue中子组件传递数据给父组件的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
Vue组件化编程需要注意的命名规则
dawn0718的专栏
01-15 847
　　记录Vue组件化编程中需要注意的命名规则。
vue父传子属性命名和封装组件命名问题（巨坑）
codingWeb的博客
01-30 1467
在vue的中文官网有这样的说明：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。 重申一次，如果你使用字符串模板，那么这个限制就不存在了。 以以下代码为例： 1、当组件中template及props等使用驼峰式命...
VUE引入子组件命名不规范错误解决
wujize的博客
05-02 2541
昨天在做一个省市县三级联动子组件，文件名称为threelink.vue，结果总是报以下错误，用了各种方法还是报错，系统引入过另一个组件fetch.vue没有问题，但这组件总是报以下错误。 Unknown custom element: - did you register the component correctly? For recursive components, make sure t...
子组件的两种方式
ZHXT__的博客
03-21 228
通过 ref 来操作 data ,或者methods, 通过 props 进行参数的传递
vue 中引入js文件json数据 在组件中使用 避免打包 详细教程
爱睡的虫虫
07-28 2157
vue中如果需要引入外部js文件，避免被打包我们可以放到public文件下： 在 public 下新建文件夹 json 中有 xmlList.js 文件 此时xmlList就不会被打包编译。 在组件中使用数据 在html文件中引入 <script src="json/xmlList.js"></script> xmlList.js let xmlList = [ {"name":"姓名一","url":"www.abc.com"}, {"name":"姓名二","url":
vue组件命名和传值 and 父子组件传值
dengying1570的博客
08-23 329
https://www.cnblogs.com/lianxisheng/p/10907350.html 转载于:https://www.cnblogs.com/smile-fanyin/p/11403037.html
组件-命名规则/组件传值
最新发布
weixin_52512511的博客
07-09 249
只能在template指定的视图中使用（只能在组件中使用）组件特点：组件与组件之间是相互独立的，数据也是相互独立的，但是组件与组件之间不可避免的要进行数据通信。可以转成成 小写单词加中线的写法 当做标签使用即可。在根vue实例下是不能使用的。直接用组件的名称 当做标签使用即可。组件与组件之间的关系不同，传值的方式也不同。铺垫知识：组件的自定义事件（绑定，触发）jquery的自定义事件的绑定和触发。
IDEA导入多个maven模块，无法识别子模块
wang_j1的博客
07-27 3634
今天导入一个Maven项目，里面有多个Maven子模块。完成后发现子模块并没有被识别，代码都是灰色的。原因可能是因为我导入外部的项目时，只加载了父Maven，而内部的子Maven没有被搜索到。 打开toolwindows下的Maven果然只看见了父maven。 解决方法： 方法一： 1、打开“View → Tool Windows → Maven”出现如下界面 转存失败重新上传取消 2、点击加号，选择子模块下的pom.xml文件，然后点击OK即可 方法二： 重新导入子Ma...
Vue组件的命名规则
baidulixueqin的博客
07-11 3845
1. 在html中不允许使用驼峰！ html中的组件必须用，例如。 在组件中, 父组件给子组件必须用，例如。2. 在template中必须使用。 3.在组件的data中用引用时,只能是方式，比如。 不规范命名的报错信息，如下图所示: 4.文件名最好全小写，因为有些古老的操作系统(window10)可能不能识别大小写，防止2个大小写文件重名。 5.组件首字母最好大写......
在Vue中子组件调用父组件方法
05-24
在Vue中子组件可以通过`this.$emit`方法来触发父组件中的自定义事件，从而调用父组件的方法。具体步骤如下： 1. 在父组件中定义一个方法，该方法将作为子组件触发的自定义事件的处理函数。 ```javascript <template> <div> <child @child-click="handleClick"></child> </div> </template> <script> import Child from './Child.vue'; export default { components: { Child }, methods: { handleClick() { console.log('父组件的方法被调用了'); }, }, }; </script> ``` 2. 在子组件中使用`this.$emit`触发一个自定义事件，并传递需要的参数。 ```javascript <template> <button @click="handleClick">点击触发父组件方法</button> </template> <script> export default { methods: { handleClick() { this.$emit('child-click'); }, }, }; </script> ``` 在上述代码中，当子组件的按钮被点击时，会触发自定义事件`child-click`，然后父组件中的`handleClick`方法会被调用。如果需要在子组件中传递参数，可以在`this.$emit`中添加额外的参数，在父组件中通过事件对象的`$event`属性来获取传递的参数。例如： ```javascript <template> <button @click="handleClick">点击触发父组件方法</button> </template> <script> export default { data() { return { message: 'Hello, parent!', }; }, methods: { handleClick() { this.$emit('child-click', this.message); }, }, }; </script> ``` 在父组件中获取传递的参数的方式如下： ```javascript <template> <div> <child @child-click="handleClick"></child> </div> </template> <script> import Child from './Child.vue'; export default { components: { Child }, methods: { handleClick(message) { console.log('收到子组件传递的消息：', message); }, }, }; </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值