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('触发');
       }
   },
相关推荐
kymjs张涛6 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵11 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian62223 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失94930 分钟前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
唐叔在学习34 分钟前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr34 分钟前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js
运维咖啡吧39 分钟前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
励志的大鹰哥1 小时前
V少JS基础班之第七弹
开发语言·javascript·ecmascript
神仙别闹1 小时前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net