Vue 子组件向上传参的问题。

Question

1、交待背景：学习vue，学到组件向上传参。
2、交待情况：我仿照官方案例，写了一个，为啥不能成功触发父级的事件，请帮助看一下
3、感谢老司机指路，愿好人一生平安。good man one life safe!

如下代码另有在线编辑器版本的在这： http://runjs.cn/code/akjpvbtx

<div id="app">
    <my-cpnt :a="10"  :b="30" v-on:sonFn="fatherFn" ></my-cpnt>
    以上两数的乘积是：{{product || "?"}}
</div>
//
    <script type="text/javascript">
        Vue.component('my-cpnt',{
            props:['a','b'],
            template:"<div class='my-cpnt' v-on:click='sonFn'>得到的两个参数求和公式为： {{a}}+{{b}}={{sum||'?'}}</div>",
            data:function(){
                return{
                    sum:null
                }
            },
            methods:{
                sonFn:function(){
                    this.sum = this.a+ this.b;
                    this.$emit('sonFn');
                }
            },
        });
        //
        var app = new Vue({
            el:"#app",
            data:{
                product:null,
            },
            methods:{
                fatherFn:function(){
                    console.log('此条消息由子组件触发');
                },
            },
        });
    </script>

Answer 1

可以看下控制台, 有说参数传递错误的信息.

将子组件的$emit修改为以下即可:

this.$emit('sonFn', this.a + this.b);

Answer 2

将你定义的sonFn事件名字改成小写sonfn就可以触发了，命名需要是小写。

Answer 3

楼上说的对，自定义事件sonFn命名不能有大写，改成小写。
关于vue组件传参，除了官网，可以再参考一下这篇：vue.js 组件之间传递数据

Answer 4

camelCase-vs-kebab-case

html特性是不区分大小写的

vm.$emit(event, [...args])
event的命名是不能用驼峰式的，也就是不能有大写。（这里我也不太清楚为什么这样设计）