How to access App.vue from another component?

Question

in my app written with VueJs 2, I have into the Vue.app this code:

export default {
  name: 'app',
  data () {
    return {
      title: 'Gestione fornitori',
      idfornitore: ''
    }
  },

  methods: {
    loadFunction (route) {
      this.$router.push(route)
    }
  }
}
</script>

I wish to access the property idfornitore from another component, I've used:

    mounted () {
      this.$parent.idfornitore = ''
    },

or also:

    mounted () {
      var Vue = require('vue')
      Vue.app.idfornitore = ''
    },

But it didn't worked. Which is the correct way to access the property from another component?

Thank you in advance.

Answer 1

• Use props to communicate data from parent to child.

• Emit events to communicate from child to parent

Parent.vue

    <template>
      <div>
         <h2>Parent: {{idfornitore}}</h2>
         <child :idfornitore="idfornitore" @changevalue="idfornitore = $event"></child>
         //idfornitore - data sent to child from parent.
         //changevalue - event emitted from child and received by parent
      </div>
    </template>

    <script>
    import Child from './compname.vue';

    export default {
        components:{
            "child" : Child
        },
        data(){
            return {
                idfornitore : "34"
            }
        }
    }
    </script>

Child.vue

<template>
  <div>
    Child: {{idfornitore}}
    <button @click="add()">Add</button>
  </div>
</template>
<script>
export default {
       props:["idfornitore"],
       methods : {
           add(){
               this.idfornitore++; // mutating props directly will result in vuejs warning. i have used this code here to show how this works.
               this.$emit("changevalue",this.idfornitore); //cascade the update to parent
           }
       }
    }
</script>

• if you feel communicating through props results in tight coupling, then the more convenient approach would be using eventBus

Answer 2

Communication between components are done via props or events.

If the component data you wish to access has child relationship, you could use props. But in your case, you need to change parent data. For this purpose, you could emit events. Events would be clean solution, if the component (you wish to update) is the direct parent of your current component.

If not so, use EventBus pattern. Using this pattern you could emit events from any component and listen to them in any other component and apply changes accordingly.

https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication https://alligator.io/vuejs/global-event-bus/

EventBus patterns will produce really dirty codes and makes debugging really difficult if communication between components is needed more often.

To handle shared state between multiple components, it is highly recommended to use vuex. It makes your application state easily manageable and easy to maintain. I believe every real world Vue application needs state management and this could be easily achieved by vuex (or other similar tools) and I suggest you to do so.

https://vuejs.org/v2/guide/state-management.html

https://vuex.vuejs.org/en/intro.html