How to transfer data between components in Vue.js?

I'm trying to transfer data form my main vue js to a vue component. My project is built with laravel. I've app.js that mainly work for vue. And also have other components. I would like to transfer data between them. Please check my code.

This is my app.js

require('./bootstrap');
import Vue from "vue";
import VueResource from 'vue-resource'

Vue.use(VueResource);
Vue.http.headers.common['X-CSRF-TOKEN'] = $('input[name="csrf-token"]').attr('value');

Vue.component('google-map', require('./components/GoogleMap.vue'));

const app = new Vue({
    el: '#app',
    data: {
        lat: 0,
        lng: 0,
        center: { lat: 45.508, lng: -73.587 },
    },
    created(){
        this.lat = 34.20;
        this.lng = 100.36; 
        this.setCenter();
    },
    methods: {
        setCenter(){
            this.center.lat = parseFloat(this.lat);
            this.center.lng = parseFloat(this.lng);
        }
    }
});

This is my GoogleMap.vue

<template>
  <div>
  </div>
</template>

<script>
export default {
  name: "GoogleMap",
  data() {
    return {
      center: { lat: 45.508, lng: -73.587 },
    };
  },

  mounted() {
    this.centerFun();
  },

  methods: {
    centerFun(){
        console.log(this.center);
    }
  }
};
</script>

This is my map.php

<html>
<head>
    <title>Map</title>
</head>
<body>
    <div id="app">

        <label>Lat</label><input type="text" name="" v-model="lat" @keyup="testFun">
        <label>Lng</label><input type="text" name="" v-model="lng" @keyup="testFun">

        <google-map></google-map>
    </div>

    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

You can see there are two "center" var. Can I bind those to a single one? Or what can I do? If I've multiple components, how can I transfer data form app.js to those components or those components to app.js?

Update GoogleMap.vue to this:

<template>
  <div>
  </div>
</template>

<script>
export default {
  name: "GoogleMap",
  props: ['center'],
  data() {
    return {
      // center: { lat: 45.508, lng: -73.587 },
    };
  },

  mounted() {
    // this.centerFun();
  },

  methods: {
    //centerFun(){
    //    console.log(this.center);
    //}
  }
};
</script>

...so that it can accept the center prop from the parent component. And then send center from your parent component to googlemap component like this:

<google-map :center="center"></google-map>

As @AlxTheRed mentioned, more info about how props work can be found at:

https://vuejs.org/v2/guide/components-props.html

Sharing Data Between Components in Vue.js - DEV, js from a Child component to Parent component is using PROPS. Firstly, I am going to cast light on PROPS. What, why, and how to use Props. Search For Online Data Transfer Fast and Save Time

You can pass values from parent component to child component via props.

Sharing data between component in Vue js - kashif azmi, When creating VueJs components, there are always concerns about how to use the Server Bus in the component we want to send data from. Declare the variables you want from the parent component as props in child component. In parent component, where you are including your child component: <child-comp var1="abc" :var2="xyz"></child-comp> In child component's instance, declare these as props: props: ['var1','var2'], Now, in child component, you can directly access them as: this.var1

Declare the variables you want from the parent component as props in child component.

In parent component, where you are including your child component:

<child-comp var1="abc" :var2="xyz"></child-comp>

In child component's instance, declare these as props:

props: ['var1','var2'],

Now, in child component, you can directly access them as:

this.var1 

Read more here: https://vuejs.org/v2/guide/components.html

Sharing data across Vuejs components, How you can transfer data between components in vue js? I'll explain to you the Duration: 10:22 Posted: Aug 29, 2019 VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we’re passing data from a parent to a child component!

If your structure contains many dependencies, I suggest you to use vuex.

Transfer Data Between Components In Vue JS, You can either use props or an event bus, where you'll be able to emit an event from a component and listen on another vm.$on('test', function  Whenever the data inside our component changes, the updateMessage method will be executed. Inside this method, we make the component data available through the data field childData. It's now ready to be passed as a prop to another component. updateMessage(variable) { this.childData= variable; }

How to share data between components in VueJS, We're going to create an event bus instance as a separate file, import it into the two components that are going to share data, and then allow the  🚀Transfer Data Between Components In Vue JS » Laravel & VueJs

Using event bus in Vue.js to pass data between components , This article outlines how to pass data between components in the context of single file components. Passing Data From Parent Component to  Do not want to see too much, please check the final summary to select the required. Welcome to my blog:Lin Xi Xi When there is only one routing view area in a component, and there is no parent-child relationship between each routing component, it is not good to pass data between components through parent-child components.

Passing Data Between Vue Components, This is a tutorial on how we can share the data across components in vuejs. In this post, we'll see how we can pass data from parent to child  Essentially, an event bus is a Vue.js instance that can emit events in one component, and then listen and react to the emitted event in another component directly — without the help of a parent component. By definition, using an event bus is more efficient than using event emitters because it requires less code to run.

Comments
  • More information on props in Vue can be found here: vuejs.org/v2/guide/components-props.html
  • Glad I could help :)
  • Does this pass by reference? If you update the value in one component does it work back up to the parent and in to other components which have been given that variable?
  • You should avoid doing this. If you mutate a prop in child component, it will be changed back when parent component reloads or change the prop value.
  • All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. Also, objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component will affect parent state. vuejs.org/v2/guide/components-props.html