Vue关于子级组件向父级组件传值调用$emit函数不能够使用驼峰命名法

问题描术

若在父组件parent中调用子组件child,父组件有写好的getData()方法。

javascript 复制代码
methods: {
       getData(data) {
          console.log(data);
         }
   },

父组件引入子组件代码出下:

parent.vue

html 复制代码
<child ref="child" @getData="getData"/>

在子组件child中使用

child.vue

javascript 复制代码
methods: {
       sendData() {
           this.$emit('getData',"Child data")
          // console.log('触发');
       }
   },

此时的调用并不起作用

原因

原因是DOM的标准与js的不一样,对大小写不敏感。

解决方案

需将驼峰命名法更改为以连字符-互相连接的小写字母串。

parent.vue

html 复制代码
<child ref="child" @get-data="getData"/>

在子组件child中使用

child.vue

javascript 复制代码
methods: {
       sendData() {
           this.$emit('get-data',"Child data")
          // console.log('触发');
       }
   },
相关推荐
Apifox11 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952715 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据34 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿38 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox