Question

我有一个基本的Vue2组件，我正在尝试使用$emit将数据从子组件传递到父组件。 注意， my-component包含一个表格，当我点击一行时，onRowClick成功触发，输出＆＃39; foobar＆＃39;到控制台。出于某种原因，我无法在$ 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]);

希望可以帮助你。

Vue - 将数据从子节点传递到父节点 - 基本发射不起作用

1 个答案: