DEV Community

loading...

Vue.js Components Communication

flavio ⚡️🔥
I write tutorials for developers at https://flaviocopes.com
Originally published at flaviocopes.com on ・2 min read

Components in Vue can communicate in various ways.

Props

The first way is using props.

Parents “pass down” data by adding arguments to the component declaration:

<template>
  <div>
    <Car color="green" />
  </div>
</template>

<script>
import Car from './components/Car'

export default {
  name: 'App',
  components: {
    Car
  }
}
</script>

Enter fullscreen mode Exit fullscreen mode

Props are one-way: from parent to child. Any time the parent changes the prop, the new value is sent to the child and rerendered.

The reverse is not true, and you should never mutate a prop inside the child component.

Events to communicate from children to parent

Events allow you to communicate from the children up to the parent:

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething')
    }
  }
}
</script>

Enter fullscreen mode Exit fullscreen mode

The parent can intercept this using the v-on directive when including the component in its template:

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleClickInParent: function() {
      //...
    }
  }
}
</script>

Enter fullscreen mode Exit fullscreen mode

You can pass parameters of course:

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething', param1, param2)
    }
  }
}
</script>

Enter fullscreen mode Exit fullscreen mode

and retrieve them in the parent:

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleClickInParent: function(param1, param2) {
      //...
    }
  }
}
</script>

Enter fullscreen mode Exit fullscreen mode

Using an Event Bus to communicate between any component

Using events you’re not limited to child-parent relationships.

You can use the so-called Event Bus.

Above we used this.$emit to emit an event on the component instance.

What we can do instead is to emit the event on a more generally accessible component.

this.$root, the root component, is commonly used for this.

You can also create a Vue component dedicated to this job, and import it where you need.

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$root.$emit('clickedSomething')
    }
  }
}
</script>

Enter fullscreen mode Exit fullscreen mode

Any other component can listen for this event. You can do so in the mounted callback:

<script>
export default {
  name: 'App',
  mounted() {
    this.$root.$on('clickedSomething', () => {
      //...
    })
  }
}
</script>

Enter fullscreen mode Exit fullscreen mode

Alternatives

This is what Vue provides out of the box.

When you outgrow this, you can look into Vuex or other 3rd part libraries.

I'm working on a Vue.js course. If you're interested in learning Vue, get on the list to get a free 100+ pages ebook about the Vue fundamentals next week!

Discussion (0)

Forem Open with the Forem app