围绕这个话题似乎有很多讨论，例如使用hub的Stackoverflow答案，使用refs的Stackoverflow答案，所以我真的很想请专家为这个问题提供一个清晰简洁的答案。如果答案也是不可能的，请说明！
场景如下： 有两个组件，父组件和子组件
<Parent> // There is a button here that can be clicked to emit an event using 'this.$emit()'
<Child></Child> // The child listens and once hears the event, it does something
</Parent>
要实现什么？
单击父级中的按钮会发出某个事件，孩子将不断侦听，一旦听到事件，它就会执行一个动作，例如调用自己的方法。
到目前为止，这是怎么回事？
使用集线器，在 Vue Hub 中明确说明这是针对非 亲子沟通，那么用它来做什么 亲子沟通？
使用 Refs，当无法使用道具和事件时，作为最终解决方案给出。那么，为什么首先不可能有事件呢？
我自己的想法
在我看来，一个事件的触发和倾听它只能从孩子到父母，基本上是单向交流。父组件能够发出事件，但子组件无法捕获事件。为什么？我试过这个，但没有用：
在我拥有的父组件中(通过单击父组件中的按钮触发)：
methods: {
generateCharts: function () {
this.$emit('generate-charts')
console.log('charts generated')
}
在子组件中，我有：
mounted () {
this.parent.$on('generate-charts', function () {
console.log('event captured') // Here nothing gets logged to the console
})
}
更新
刚遇到这个答案 Vue $emit。 显然，这在 Vue 中根本不可能。
乍一看，这似乎是一个缺陷，因为我遇到过几种情况，我需要从父母那里触发一个事件并在孩子身上倾听它。
我可以想象 Vue 无法做到这一点一定是有原因的，这可能是一个设计考虑，Vue 专家解释了为什么会这样，以及解决一般将事件从父级传递到子级的场景的更好设计方法是什么，将不胜感激。
答案是使用道具并对这些道具的更改做出反应。 一开始习惯有点令人困惑，因为做一些简单的事情似乎有很多代码，但随着你的应用程序变得越来越复杂，使用 props 强制执行的单向数据流确实有助于调试和推理代码试图完成的内容。
例如，模态。 您的父母通过单击按钮设置showChildModal = true，此值将作为道具传递给孩子。 孩子正在观察道具的变化，当它看到它设置为 true 时，它会打开模态。 最后，当模态关闭时，子$emit('close')父级正在监视的内容，当它看到它设置时，它会设置showChildModal = false
Vue.component('child', {
template: '#child',
props: ['showModal'],
name: 'child',
watch: {
showModal: function(show) {
if (show) {
window.setTimeout(() => {
if (window.confirm("Hi, I'm the child modal")) {
this.$emit('close');
} else {
this.$emit('close');
}
}, 100)
}
}
}
})
var vm = new Vue({
el: '#el',
data() {
return {
showChildModal: false
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="el">
Parent
<p>
<button @click="showChildModal = true">Click to show child modal</button>
</p>
<hr>
<p>
<child :show-modal="showChildModal" v-on:close="showChildModal = false"> </child>
</p>
</div>
<script type="x-template" id="child">
<div>
Child
<p>
modal open? {{ showModal }}
</p>
</div>
</script>