Vue - 将数据从孩子传递给父母 - 基本发射不起作用

Question

我有一个基本的 Vue2 组件，我正在尝试使用 $emit 将数据从子组件传递到父组件。 注意， my-component 包含一个表格，当我单击一行时，onRowClick 会成功触发，并将“foobar”输出到控制台。出于某种原因，我无法让父方法在 $emit 上触发，并且没有将成功记录到控制台。知道这是为什么吗？

import Vue from 'vue';
import MyComponent from "./components/MyComponent.vue";

window.onload = function () {
   var main = new Vue({
      el: '#app-v2',
      components: { MyComponent },
      methods: {
         onCouponApplied(data) {
            console.log("Success, coupon applied, " + data);
            this.saying = "Sunglasses are " + data; //Sunglasses are cool
         }
      },
      data: {
         contactEditPage: {
            saying: ""
         }
      }
   });
}

MyComponent.vue

export default {
        methods: {
            onRowClick(event){ 
               this.$emit('applied', 'Cool');
               console.log("foobar");
            }

HTML

<div id="app-v2">
    <my-component @applied="onCouponApplied"></my-component>
     {{ saying }} //trying to output: sunglasses are cool
</div>

Answer 1

我遇到了同样的问题。我通过使用 $root 解决了这个问题。

例如在父级Vue组件中

mounted(){
    this.$root.$on('event-name',function(value){
        // code
    });
},

子组件应该是这样的：

this.$root.$emit('event-name',[data]);

希望能帮到你。