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.

divine · Accepted Answer · 2018-01-18 11:06:29Z

9

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

answered Jan 18, 2018 at 11:06

divine

4,9323 gold badges32 silver badges44 bronze badges

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

4 Comments

Rahul Over a year ago

when there is multiple child and send data from last child to root main parent then it would be little complex. what would be the solution for that? I used Vuex to solve this.

divine Over a year ago

if project is small, vuebus will be fine as i mentioned in my last point, vuex will be a overkill for small projects.

divine Over a year ago

@Rahul using props for communication would be the best approach for developing UI components like carousal,popup

Roberto Scarciello Over a year ago

Thank you, your code is explicative and I've understood how to operate.

tony19 · Accepted Answer · 2022-07-15 04:41:29Z

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

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

Collectives™ on Stack Overflow

How to access App.vue from another component?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related