title: Vue.js Parent Child communication via Props and Events
body: <p><a href="https://i.stack.imgur.com/AjMt3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AjMt3.png" alt="childParent"></a></p>
  
  <p>Hello I am relativly new to Vue.js and sofar I enjoy working with it but today I am struggling and I have not found a clean solution for my problem.</p>
  
  <p>I have 9 Child.vue components which I create in a v-for loop every Child.vue includes a ContextMenu.vue component. If I click on a button in Child.vue i trigger this context menu. Everything works well sofar.</p>
  
  <p>Now I want only one context menu to be shown at every point in time. So i was thinking I emit a Event to the Parent.vue something like "menuIsShown" and dispatch in the parent a event to every Child.vue to hide the menu. In the one menu I could simply set it to visible.</p>
  
  <pre><code> this.$emit('contextMenuShown', true);
   this.showMenu();
  </code></pre>
  
  <p>But as I learned there is no $dispatch in Vue2 any more. So i tried to use this.$children in the Parent.vue to trigger a method in every Child.vue. Somehow this did not work aswell and I guess there must be a better solution for this problem as you should use Props to communicate down to the children. But this seems pretty hard to me in a for loop. To use a global Event bus would be possible also, but is that really necessary?</p>
  
  <p>Any best practice advice how to solve this problem?</p>
  
  <p>Thanks in advance 
  robi</p>