How to share data between components Vue js

Question

Hi there I saw posts talking about this, but is not easy for me understand what I have to do to share data between components, I don't want to use event bus so can you tell me how to use props??

Component A:

<template>
  <div>
    <div class="container">

                  <fileForm></fileForm> //<--- THE COMPONENT B      
        </div>
      </div>
</div>
</template>

<script>

export default {

  name: "DashBoard",
  data() {
    return {
      user: {},
    };
  },
  methods: {
    checkIfImLoggedIn() {

      }
    },
    onComplete() {
    },
  },
  mounted() {
    this.checkIfImLoggedIn();
  }
};
</script>

Component B:

<template>
  //...
</template>

<script>
export default {
  name: "FileForm",
  data() {
    return {
      fileExtensions: ["CSV", "EXCEL"],
      sharedData : {}, //<--- for example share this

    };
  },
  methods: {}
};
</script>

Using props is even harder as using the event bus. Look for Vuex. With Vuex you can share data in easy, standardized way. — user6748331
– user6748331, Commented Dec 1, 2017 at 9:30

tony19 · Accepted Answer · 2022-07-15 02:49:57Z

0

If you want to share data from the parent to the child you can do:

on component A

<fileForm :something="user"></fileForm>

In component B

props: {
  something: Object
}

If you want to share data from the child to the parent you have to use an event bus or vuex: https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

edited Jul 15, 2022 at 2:49

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 1, 2017 at 9:58

François Romain

14.5k17 gold badges95 silver badges128 bronze badges

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

Comments

Rub · Accepted Answer · 2021-02-19 06:03:12Z

0

https://alligator.io/vuejs/component-communication/

You need to do some research about communication among components.

There are a lot of ways to do it ;)

edited Feb 19, 2021 at 6:03

Rub

2,95635 silver badges49 bronze badges

answered Dec 1, 2017 at 9:28

Pierre.Green

471 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to share data between components Vue js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related