有点不明白，vue子组件自定义事件为何不能在$emit传入当前方法

Question

标题不知道描述得对不对。
大概情况是这样，我的子组件是一个修改昵称的表单，父组件是个人信息页面。
我通过子组件的表单提交，得到后端成功提示后，将新的昵称传给父组件。
在子组件定义了一个方法，名为updateNickName,然后在这个方法里，使用$emit进行触发本身，无效果。
然后我就定义了一个无操作的方法，通过这个去做类似的中转，就能回调到父组件的方法（editNickName）。

我看了官网的例子，直接将自身传入$emit的，为何我这里就无效，需要这么中转？

官方例子：http://cn.vuejs.org/v2/guide/...自定义事件

//修改昵称

<template id="nickname">
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="J_nameModal"><!-- 修改昵称 -->
                <form class="am-form am-form-horizontal" action="#" method="post" v-on:submit.prevent="updateNickname">
                <!-- 这里面是新昵称输入和提交按钮 省略... -->
                </form>
    </div>
</template>

methods:{
    done: function(){},
    updateNickName： function(){
        $.ajax({
            url:'#',
            type:'POST',
            data:{'nickname':_this.nickName},
            dataType:'json',
            success:function(data){
                if(data.code==200 && data.status==true){
                    //这里，如果我写了当前这个方法名就没效果。。。定义一个无操作的方法[done],就有效果
                   _this.$emit('updateNickName',_this.nickName); // 将修改后的用户昵称返回给父组件            
                   //有效
                   _this.$emit('done',_this.nickName);
                }
            }
        });
    }
}


/*
 <!-- 无效 -->
<div id="app">
    <nickname-component v-bind:nick-name="data.nickname" v-on:updateNickName="editNickName"></nickname-component>
</div>




  <!-- 有效-->
<div id="app">
    <nickname-component v-bind:nick-name="data.nickname" v-on:done="editNickName"></nickname-component>
</div>
*/

我明白了，在$emit里的事件名是随便起的，和当前方法无关，用asaassa,submit,gogogogo,change都可以，只要在挂载组件的地方一致就好了。看了官方DEMO，我还以为需要像下面那样，在increment方法里面将自己写进去呢。。。。。。

 methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },

反正目前我也不知道为啥，最近在通过vue-cli类似官方demo写入自身方法名就有效。上面问题不是属于vue-cli构建，仅仅是类似当作jQuery引入使用而已。

Answer 1

大小写问题。
我今天刚入手vue也遇到这个问题了，真是坑！
你把事件名改成全小写就可以了。

this.$emit('updatenickname')
v-on:updatenickname="parentMethod"

大家都知道js中最常见的命名方式就是驼峰命名了，为什么vue不支持驼峰命名来定义事件。。

Answer 2

不应该是@updateNickName="editNickName" 或者 v-on:updateNickName="editNickName" 吗

Answer 3

楼主说的不错，但是我觉得你第一种方法也应该可以的。为啥不行？

Answer 4

$emit 触发的不是自身的函数.
而是传递给父组件.父组件通过监听该emit事件来执行真正的操作.
只要emit中的事件名跟父组件中v-on监听的一样就可以

Answer 5

感觉第一种应该可以吧，楼主知道第一种为什么没用了吗？

Answer 6

你在父组件的methods里加一个

editNickName: function(val) {
    this.data.nickname = val //监听到子组件的改变值
}

试试？