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('触发');
       }
   },
相关推荐
四喜花露水31 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy40 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
工业甲酰苯胺1 小时前
C# 单例模式的多种实现
javascript·单例模式·c#
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生2 小时前
回调数据丢了?
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web