Vue.js 2中如何从其他组件访问App.vue的属性？

Hey Roberto, let's figure out how to properly access and update that idfornitore property from your other component in Vue 2. The approaches you tried have some key issues, so let's break down the recommended ways to handle this:

Why Your Previous Attempts Didn't Work #

• Using this.$parent.idfornitore might fail if the component isn't a direct child of App.vue (Vue's component hierarchy can get nested, and $parent only points to the immediate parent). Even if it did work, directly modifying parent component state this way breaks Vue's one-way data flow principle, making your code harder to maintain.
• The Vue.app.idfornitore approach is invalid because there's no global Vue.app reference by default—you can't access your root instance this way unless you explicitly assign it.

Recommended Solutions #

1. Props + Custom Events (Best for Parent-Child Hierarchies) #

If the component trying to access idfornitore is a direct child of App.vue, use props to pass the value down, and custom events to send updates back up (following Vue's one-way data flow):

In App.vue:

<template>
  <!-- Pass idfornitore to your child component via props -->
  <ChildComponent :id-fornitore="idfornitore" @update-id="updateIdFornitore" />
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      title: 'Gestione fornitori',
      idfornitore: ''
    }
  },
  methods: {
    loadFunction (route) {
      this.$router.push(route)
    },
    updateIdFornitore(newValue) {
      // Update the parent's state when the child emits the event
      this.idfornitore = newValue
    }
  }
}
</script>

In your child component:

<script>
export default {
  props: {
    idFornitore: {
      type: String,
      required: true
    }
  },
  mounted () {
    // To update the value, emit an event instead of modifying directly
    this.$emit('update-id', '') // Pass your desired new value here
  }
}
</script>

2. Vuex (Best for Cross-Component State Sharing) #

If you need to access idfornitore across multiple components (not just parent-child), use Vuex to centralize your state:

Step 1: Set up Vuex (install first with npm install vuex@3 for Vue 2)

Create a store.js file:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    idfornitore: ''
  },
  mutations: {
    SET_ID_FORNITORE(state, newValue) {
      state.idfornitore = newValue
    }
  },
  actions: {
    updateIdFornitore({ commit }, newValue) {
      commit('SET_ID_FORNITORE', newValue)
    }
  },
  getters: {
    getIdFornitore: state => state.idfornitore
  }
})

Step 2: Register the store in main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

Step 3: Use in App.vue and other components

In App.vue, you can sync the local data with Vuex (or just use Vuex directly):

<script>
export default {
  name: 'app',
  data () {
    return {
      title: 'Gestione fornitori'
    }
  },
  computed: {
    idfornitore: {
      get() {
        return this.$store.getters.getIdFornitore
      },
      set(newValue) {
        this.$store.dispatch('updateIdFornitore', newValue)
      }
    }
  },
  methods: {
    loadFunction (route) {
      this.$router.push(route)
    }
  }
}
</script>

In your other component:

<script>
export default {
  mounted () {
    // Get the value
    console.log(this.$store.getters.getIdFornitore)
    // Update the value
    this.$store.dispatch('updateIdFornitore', '')
  }
}
</script>

3. Event Bus (Quick Fix for Simple Cross-Component Communication) #

For smaller apps where Vuex feels overkill, use a global event bus:

Step 1: Create the bus in main.js

import Vue from 'vue'
Vue.prototype.$bus = new Vue()

// Optional: Store idfornitore directly on the bus
Vue.prototype.$bus.idfornitore = ''

Step 2: Use in App.vue

<script>
export default {
  name: 'app',
  data () {
    return {
      title: 'Gestione fornitori',
      idfornitore: ''
    }
  },
  mounted() {
    // Sync bus value with local data if needed
    this.$bus.$on('update-id', (newValue) => {
      this.idfornitore = newValue
    })
  },
  methods: {
    loadFunction (route) {
      this.$router.push(route)
    }
  }
}
</script>

Step 3: Use in your other component

<script>
export default {
  mounted () {
    // Update via event
    this.$bus.$emit('update-id', '')
    // Or if you stored it directly on the bus:
    this.$bus.idfornitore = ''
  }
}
</script>

内容的提问来源于stack exchange，提问作者Roberto Scarciello