Passing Data Between Components in Vue

The dilemma

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

<template><Child/></template>
<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})
}
}
}
<template>
<Child @it="handleIt($event)">
</template>
<script>
import Child from "./Child.vue"
export default {
name: "Parent",
components: {
Child
},
methods: {
handleIt: function(event){
console.log(event)
}
}
}
</script>

Conclusion

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

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