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更改为v-on:p-add

Vue.js事件传递问题

1 个答案: