How to transfer data between components in Vue.js?

Question

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?

tony19 · Accepted Answer · 2022-07-15 02:24:51Z

4

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://v2.vuejs.org/v2/guide/components-props.html

edited Jul 15, 2022 at 2:24

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 31, 2019 at 5:32

Tanmay

3,20910 gold badges58 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AlxTheRed Over a year ago

More information on props in Vue can be found here: vuejs.org/v2/guide/components-props.html

Tanmay Over a year ago

Glad I could help :)

bgsuello · Accepted Answer · 2019-01-31 05:28:08Z

1

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

answered Jan 31, 2019 at 5:28

bgsuello

7327 silver badges14 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 02:44:06Z

1

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://v2.vuejs.org/v2/guide/components.html

edited Jul 15, 2022 at 2:44

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 31, 2019 at 5:36

Gaurav Neema

1561 gold badge1 silver badge12 bronze badges

3 Comments

Qwertie Over a year ago

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?

Gaurav Neema Over a year ago

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.

Gaurav Neema Over a year ago

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

LakiGeri · Accepted Answer · 2019-01-31 11:01:25Z

0

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

answered Jan 31, 2019 at 11:01

LakiGeri

2,1058 gold badges36 silver badges59 bronze badges

Collectives™ on Stack Overflow

How to transfer data between components in Vue.js?

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related