Vue.js子组件$emit事件未被父组件捕获的问题排查

我来帮你一步步揪出这个问题！你说子组件已经打印了“klaar voor emit...?”，但父组件的emit ontvangen就是没出现，大概率是事件匹配或者组件注册的小疏漏，咱们一个个排查：

• 事件名大小写不匹配（最可能的元凶）
  你得注意，HTML的属性是不区分大小写的！你父组件里写的@newPicture="updatePicture"，浏览器会自动把它转成全小写的@newpicture，但你的子组件$emit的是驼峰式的newPicture，这俩名字对不上，父组件自然接收不到事件。
  解决办法很简单，二选一就行：
  要么把父组件的监听改成短横线分隔的规范写法：

  <ImageUpload :imgUrl="url" @new-picture="updatePicture"></ImageUpload>
  

  要么子组件emit的时候用全小写的事件名：

  this.$emit('newpicture', imageData);
  

  个人更推荐第一种，符合Vue的最佳实践哦。

• 检查ImageUpload组件是否正确注册
  你有没有在ManageCards组件的components选项里注册ImageUpload呀？要是没注册的话，哪怕模板里写了标签，组件其实没正常工作，事件肯定传不过来。
  记得在ManageCards的script里加上这段：

  import ImageUpload from './ImageUpload.vue'; // 路径要根据你的项目结构调整哦
  
  export default {
    components: {
      ImageUpload
    },
    // ...其他代码
  }
  

• 子组件setImage里的隐藏bug（不影响事件，但会搞坏文件）
  顺便提一句，你处理blob的时候有个小错误：res.arrayBuffer少了括号！应该写成res.arrayBuffer()，因为arrayBuffer是异步方法，必须调用它才能拿到实际的buffer数据：

  .then(res => res.arrayBuffer()) // 这里补上括号
  

  不然你拿到的只是函数本身，创建出来的File对象是无效的，后面POST请求也会出问题。

• 尽量避免props和data命名冲突
  子组件的props里有imgUrl，但data里又定义了url，虽然这不是事件不触发的原因，但后续很容易搞混逻辑，建议把data里的url改成localImgUrl这类更清晰的名字。

备注：内容来源于stack exchange，提问作者M.Koops