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

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>
回复
阅读 3.4k
4 个回答

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

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

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

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

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

camelCase-vs-kebab-case

html特性是不区分大小写的

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

推荐问题
宣传栏