Listen to events from the parent component in the child and execute the childs method in vue without a hub

Question

It seems that around this topic a lot of discussion, such as qaru.site/questions/722015 / ... , qaru.site/questions/722015 / ... , so I would really like to ask the experts to give this one a clear concise answer to this question. If an answer is also not possible, please indicate this!

Here is the scenario: There are two components: parent and child

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

What should be done?

Pressing a button in the Parent emits a specific event, the child will constantly listen, and as soon as he hears the event, he performs an action, for example, calling his own method.

What is still there?

• Using a hub, the Vue Hub clearly states that it is for Non-Transfer of a parent child, so what's the point of using it for a parent-child?

• Using Refs , which is provided as the final solution when it is impossible to use details and events. So why is this not possible with events in the first place?

My own thought

It seems to me that firing an event and listening to it is possible only from the child to the parent, mainly in a one-way message. The parent can emit an event, but the child component (s) cannot capture the event. What for? I tried this and did not work:

In the parent component that I run (by clicking the button in the parent component):

methods: {
  generateCharts: function () {
    this.$emit('generate-charts')
    console.log('charts generated')
}

In the child component, I:

mounted () {
 this.parent.$on('generate-charts', function () {
   console.log('event captured') // Here nothing gets logged to the console
 })
}

Update

Vue $emit. , Vue.

, , , .

, , Vue, , , Vue , , , .

Answer 1

. , , , - , , , , , .

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

Hide result