Sharing data between two vue files using variable defined in main js

Question

I have two separate vue files:- for example 1.vue and 2.vue and a main js file.

I have a variable xyz under window.App data: method in main.js

I want to access this variable as a share data variable how will I use it in my both the vue files. for example 1.vue will put some data under this variable and 2.vue will access this data.

1.vue will emit an event, main will update the value, and 2.vue will receive it as a prop. See vuejs.org/v2/guide/components.html#Composing-Components — Roy J
– Roy J, Commented Jan 3, 2018 at 14:43
How it will work for global data:- I mean, in main.js window.App = new Vue({ el: '#app', data: { xyz: {} }, and 1.vue put data in xyz and 2.vue use it .. I dont understand how to create a method in 1.vue to access this variable — JustStartedProgramming
– JustStartedProgramming, Commented Jan 3, 2018 at 14:55
Components should not access variables that are not their own. Just because App is global does not mean its data should be treated as global. It should not. Encapsulation is important. Components should not depend on things that are external to them. — Roy J
– Roy J, Commented Jan 3, 2018 at 15:50

James Westgate · Accepted Answer · 2018-01-03 16:32:43Z

1

There are two recommended ways to pass data between components (eg 1.vue and 2.vue)

Using props and events. You have xyz defined in your root instance data. When using the component declared in 1.vue, pass the value as a prop (property) and add this as a value as a prop in 1.vue. When the value changes in 1.vue, trigger an event which updates the value in the root instance, so that 2.vue can also see this value through a prop.
Use vuex. Vuex creates a shared state that all components can see via a store. You update the value through mutations and actions, and other components will automatically react to these changes using a computation.

answered Jan 3, 2018 at 16:32

James Westgate

11.5k8 gold badges66 silver badges69 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-16 05:10:28Z

0

According to the documentation

If you need to pass datas from a component to another. You should use props in the child component and v-bind or : in the parent.

Parent Vue :

<child-component :datas="array"></child-component>
<script>
export default {
  data: () => ({
    array: [1,2,3]
  })
</script>

Child Vue:

<div v-for="item in array"></div>

<script>
export default {
  props: {
    array: Array // Array is the typeof (can be Object, Array or String)
  }
</script>

PS : It was a bit hard for me to make it works.

Edit : Or maybe you can use a mixin class to create and update the variable

edited Jul 16, 2022 at 5:10

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 3, 2018 at 14:47

Sandwell

1,4672 gold badges16 silver badges31 bronze badges

4 Comments

JustStartedProgramming Over a year ago

How it will work for global data:- I mean, in main.js window.App = new Vue({ el: '#app', data: { xyz: {} }, and 1.vue put data in xyz and 2.vue use it .. I dont understand how to create a method in 1.vue to access this variable

Sandwell Over a year ago

I think it should work this way. That's how I do with Vue Router. Can't you acces xyz in other component ? Try to type "window.app.data.xyz" in the console. Otherwise, you can attach your data to the Global Scope. To the window by example (if datas is not security sensitive)

JustStartedProgramming Over a year ago

Is it possible to create method in 1.vue like this getdata: function(app){window.App.xyz = app; '2.vue'; }

Sandwell Over a year ago

Probably, but it's a bit ugly, I would try to do it with Vue.

Collectives™ on Stack Overflow

Sharing data between two vue files using variable defined in main js

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related