Vuejs Share Data Between Components
Solution 1:
Just keep in mind, the rule of thumb is using props to pass data in a one-way flow
props down, events up. https://vuejs.org/v2/guide/components.html#Composing-Components
Quick solution:
Global event bus to post messages between your <App/> and <Sidekick/> components.
https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
Long term solution:
Use a state management library like vuex to better encapsulates data in one place (a global store) and subscribe it from your components tree using import { mapState, mapMutations } from 'vuex'
Solution 2:
When you have parent-child communication, the best and recommended option is to use props and events. Read more in Vue docs
When want to have shared state between many components the best and recommended way is to use Vuex.
If you want to use simple data sharing you can use Vue observable.
Simple example: Say that you have a game and you want the errors to be accessible by many components. (components can access it and manipulate it).
errors.js
importVuefrom"vue";
exportconst errors = Vue.observable({ count: 0 });
Component1.vue
import { errors } from 'path-of-errors.js'
export default {
computed: {
errors () {
get () { return errors.count },
set (val) { errors.count = val }
}
}
}
In Component1 the errors.count is reactive. So if as a template you have:
<template><div>
Errors: {{ errors }}
<button @click="errors++">Increase</button></div></template>While you click the Increase button, you will see the errors increasing.
As you might expect, when you import the errors.js in another component, then both components can participate on manipulating the errors.count.
Note: Even though you might use the Vue.observable API for simple data sharing you should be aware that this is a very powerful API. For example read Using Vue Observables as a State Store
Solution 3:
App.vue:
<router-viewpass_data='myData'/>Sidekick.vue:
exportdefault {
name: "Sidekick",
props: ["pass_data"],
created() {
alert("pass_data: "+this.pass_data)
}
}
Post a Comment for "Vuejs Share Data Between Components"