Passing Data Between Components in Vue

The dilemma

#1 Parent => Direct Child: Props/$attrs

<template><Child hello="world" v-bind:cheese="cheese"/></template>
export default {
name: "child",
props: ["hello", "cheese"]

From Parent to Router-View

<router-link :to="{path: '/route', query: {hello: 'world', cheese: this.cheese}}">
this.$router.push({path: '/route', query: {hello: 'world', cheese: this.cheese}})

Sending Data to Parents, Emit Events

export default {
name: "Child",
methods: {
itHappened: function(){
this.$emit("it", {hello: "world", cheese: this.cheese})
<Child @it="handleIt($event)">
import Child from "./Child.vue"
export default {
name: "Parent",
components: {
methods: {
handleIt: function(event){


Alex Merced is a Full Stack Developer, learn more about his work at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store