[Vuejs]-Vue.js 2 Reusing component with two different parent variables

by

0👍

VueJS 2 uses an event pattern to handle parent-child communication.
So basically, in order to have communication between child and parent you don’t necessarily need a bus. You can do the following:

//your re-usable component code
this.$emit('years-changed', years);


//your component that uses <years-exp> (parent of years-exp)
<years-exp test="years_php" tech="PHP" @years-changed="handleYearsChanged"></years-exp>

methods:{
  handleYearsChanged:function(yearsValueFromChild){  
   //here you receive exactly the value you sent via $emit in child
  }
}

In case you need to send the event to a component above the parent in hierarchy then you would have to use the bus but for parent-child communication you can use this pretty simple pattern.

Leave a comment