Vue.js事件传递问题

Question

我正在尝试使用按钮单击事件创建一个全局子组件，用于添加两个与自定义属性绑定的数字a和b，然后通过触发函数showResult（）在父组件上显示结果。

我使用“this。$ emit（”pAdd“，v）”触发父组件上的自定义事件pAdd和调用函数showResult（）来更改结果值并按{{result}}显示。

但是，它不起作用。

有人可以帮我解决这个问题吗？

        <h1>To Add</h1>
        <my-child :a="5" :b="33" v-on:pAdd="showResult"></my-child>
        <h3>\{\{result\}\}</h3>

  <script>

        Vue.component('my-child', {
            props:['a','b'],
            template: "<button @click='addme'>Add them</button>",
            methods:{
                addme:function(){
                    var v = this.a + this.b;
                    // it works here
                    console.log(this.a,'+',this.b,'=',v)
                    // trigger event on parent component
                    this.$emit("pAdd",v)
                }
            }
        })

    var app = new Vue({
        el:"#app",
        data:{
            result: 0
        },
        methods:{
            showResult:function(cval){
                console.log('showResult: ',cval)
                this.result = cval;
            }
        }
    })

  </script>

Answer 1

更改v-on:pAdd to v-on:p-add