Question

我有一个Vue应用程序，其中父组件需要发出一个事件，它通过一个按钮来执行此操作：

<button @click.prevent="saveTradeClick" class="btn btn-primary">Save</button>

它触发一个方法：

  saveTradeClick: function (event) {
    console.log("click");
    this.$emit('SAVE');
    console.log("after emit");
  },

，子组件应侦听此事件以触发方法。

    mounted() {
   this.$parent.$on('SAVE', this.submitTrade);
}

这不起作用。我得到了console.log('click');，但是子组件什么也没得到。

当我查看Vue devtools时，我得到一个$emit事件，仅此而已。有什么想法可以解决吗？

Answer 1

我建议控制父级的状态以拥有更多控制权，而不是依靠可能不可用的父级来控制子级组件。

示例：

父母

<template>
  <div>
    <button @click.prevent="saveTradeClick" class="btn btn-primary">Save</button>
    <child :traded="traded"></child>
  <div>
</template>
<script>
export default {
  data: () => ({ traded: false }),
  methods: {
    saveTradeClick() {
      this.traded = true;
    },
  },
};
</script>

孩子

<template>
  <div><div>
</template>
<script>
export default {
  props: ['traded'],
  watch:{
    traded(val) {
      if (val) this.submitTrade();
    },
  },
};
</script>

Vue unwritten rules

允许父母提及孩子，例如通过道具或裁判
孩子没有对父母的任何引用
孩子们不会更改通过道具传递的数据。

Answer 2

如果您希望子组件侦听来自父组件的事件，另一个想法是创建一个Event Bus。

现在，此功能尚未立即可用，因此您必须实际创建Vue的新实例，然后像这样导出EventBus功能。

eventbus.js

import Vue from 'vue';
export const EventBus = new Vue();

然后您将EventBus导入到要与之交互的组件中。

父组件

<template>
  <div class="pleeease-click-me" @click="emitGlobalClickEvent()"></div>
</template>

<script>
// Import the EventBus we just created.
import { EventBus } from './event-bus.js';

export default {
  name: 'Parent',
  data() {
    return {
      clickCount: 0
    }
  },

  methods: {
    emitGlobalClickEvent() {
      this.clickCount++;
      // Send the event on a channel (i-got-clicked) with a payload (the click count.)
      EventBus.$emit('i-got-clicked', this.clickCount);
    }
  }
}
</script>

因此，您现在可以在子组件中监听事件i-got-clicked

子组件

<script>
// Import the EventBus we just created.
import { EventBus } from './event-bus.js';

export default {
  name: 'Child',

  mounted() {
    EventBus.$on('i-got-clicked', clickCount => {
     console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
  });
}
</script>

和clickCount是从父级传递过来的，因此您可以长时间监听事件来共享数据。

根据应用程序大小的另一种解决方案是查看vuex

在Vue组件中未听到$ emit事件

2 个答案:

示例：