laravel - How to pass data from one component to other in vue js? -

i learning vue+laravel. want pass value 1 component other component? have used vue router routing.

here code first , second component. selectperson.vue

<template>     ......       <div>         <input type="number" class="form-control" name="numberofpersons" placeholder="enter number of persons here" **v-model="inputpersons"**>         <br>         **<selecttimeslot v-bind:numberofpersons="inputpersons"></selecttimeslot>**       </div>       <div>         <button class="btn btn-default float-right mt-2" v-on:click="selecttimeslots">next</button>       </div>     ...... </template> <script> import selecttimeslot './selecttimeslot.vue'   export default{     props:['numberofpersons'],     data(){         return{           **inputpersons:0**         }     },     methods:{       selecttimeslots(){         this.$router.push({name:'selecttimeslot'});       }     }   } </script> 

second component selecttimeslot.vue

<template> <h5>welcome, have selected **{{numberofpersons}}** persons.</h5> </template> 

can me it?

to pass data 1 component other component, need use props:

first component:

<second-component-name :selectedoption="selectedoption"></second-component-name>  export default {     components: {         'second-component-name': require('./secondcomponent.vue'),    },    data() {         return {           selectedoption: ''         }     } } 

second component:

<template>     <div>         {{ selectedoption }}     </div> </template>  <script>     export default {         props: ['selectedoption']     } <script> 

please visit this link.

hope helpful you!