events - 在子组件中监听父组件的事件并在无集线器的vue中执行子组件的方法

Question

围绕这个主题似乎有很多讨论，例如 Stackoverflow answer using hub , Stackoverflow answer using refs ，所以我真的很想请专家为这个问题提供一次清晰简洁的答案。如果答案也是不可能的，请说明!

场景如下:有两个组件，父组件和子组件

<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>

要实现什么？

点击 Parent 中的按钮会发出一个特定的事件， child 会不断地监听，一​​旦它听到事件它就会执行一个 Action ，比如调用它自己的方法。

到目前为止，这方面有什么进展？

1. 使用集线器，在 Vue Hub 中明确指出这是非亲子沟通，那么用它来做一个 child 有什么意义呢？亲子沟通？

2. 使用 Refs ，这是在无法使用 Prop 和事件时作为最终解决方案给出的。那么，为什么不能首先处理事件呢？

我的想法

在我看来，事件的触发和收听只能从 child 到 parent ，基本上是一种沟通方式。父组件能够发出事件，但子组件无法捕获事件。为什么？我试过这个但没有用:

在我的父组件中(通过单击父组件中的按钮触发):

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 专家解释了为什么会这样，以及解决一般情况下要通过的场景的更好设计方法是什么从 parent 到 child 的事件，将不胜感激。

Answer 1

答案是使用 props 并对这些 props 的变化使用react。一开始习惯有点困惑，因为做一些简单的事情似乎有很多代码，但是随着您的应用程序变得越来越复杂，使用 props 强制执行的数据流的一种方式确实有助于调试和推理代码试图完成什么。

例如，模态框。您的 parent 通过单击按钮设置 showChildModal = true，此值作为 Prop 传递给 child 。 child 正在观察 Prop 的变化，当它看到它设置为真时，它会打开模态。最后，当模式关闭时，父级正在监视的子级 $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>