Vue.js中如何在组件间传递动态更新的数组？

Hey, let's figure out why your data isn't updating between components! The core issue here is that you're trying to access user.userConf directly from Overview.data(), which only gives you a static copy of the initial data—not a reactive reference to the actual data in the running Overview component instance. Each Vue component has its own isolated data, so modifying the data in one instance won't affect the copy you grabbed from the component's data function.

Below are three practical solutions to fix this, ordered by scalability:

Solution 1: Use Vuex (Recommended for Scalable Apps) #

If your app is going to grow, Vuex is the cleanest way to manage shared state. Here's how to implement it:

1. Create a Vuex store to hold your user state:

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: {
      userConf: [],
      email: 'Benno.Jaborek@abprod.dvag.de',
      status: 'OK'
    }
  },
  mutations: {
    ADD_FAVORITE(state, favorite) {
      const isExist = state.user.userConf.some(el => el.name === favorite.name)
      if (!isExist) {
        state.user.userConf.push(favorite)
      }
    }
  },
  getters: {
    userFavorites: state => state.user.userConf
  }
})

2. Update your Overview component to use Vuex for adding favorites:

// Overview.vue
methods: {
  addToFavorites(event) {
    event.preventDefault()
    const getHref = event.target.parentElement.parentElement.href
    const getName = event.target.parentElement.children[1].innerText
    this.$store.commit('ADD_FAVORITE', { name: getName, link: getHref })
    console.log(this.$store.getters.userFavorites)
  }
}

3. Update TopNavbar to fetch favorites from the store:

<!-- TopNavbar.vue -->
<li v-for="fav in userFavorites" :key="fav.name">
  <a :href="fav.link"> {{ fav.name }} </a>
</li>
<script>
export default {
  computed: {
    userFavorites() {
      return this.$store.getters.userFavorites
    }
  }
}
</script>

Solution 2: Pass Data Through a Shared Parent Component #

If you don't want to set up Vuex yet, use a common parent component to hold and pass the state:

1. Move the user data to your parent component (e.g., App.vue or a dashboard parent):

// ParentComponent.vue
data() {
  return {
    user: {
      userConf: [],
      email: 'Benno.Jaborek@abprod.dvag.de',
      status: 'OK'
    }
  }
},
methods: {
  addFavorite(favorite) {
    const isExist = this.user.userConf.some(el => el.name === favorite.name)
    if (!isExist) {
      this.user.userConf.push(favorite)
    }
  }
}

2. Pass the favorites to TopNavbar via props, and pass the add method to Overview via an event:

<!-- ParentComponent.vue template -->
<Overview @add-favorite="addFavorite" />
<TopNavbar :favorites="user.userConf" />

3. Update Overview to emit the add event instead of modifying local data:

// Overview.vue
methods: {
  addToFavorites(event) {
    event.preventDefault()
    const getHref = event.target.parentElement.parentElement.href
    const getName = event.target.parentElement.children[1].innerText
    this.$emit('add-favorite', { name: getName, link: getHref })
  }
}

4. Update TopNavbar to use the passed prop:

<!-- TopNavbar.vue -->
<li v-for="fav in favorites" :key="fav.name">
  <a :href="fav.link"> {{ fav.name }} </a>
</li>
<script>
export default {
  props: {
    favorites: {
      type: Array,
      default: () => []
    }
  }
}
</script>

Solution 3: Use an Event Bus (Quick Fix for Small Apps) #

For a lightweight, quick solution, create a global event bus to notify components of data changes:

1. Create the event bus in a separate file:

// bus.js
import Vue from 'vue'
export default new Vue()

2. Update Overview to emit an event when favorites are updated:

// Overview.vue
import Bus from './bus.js'

data() {
  return {
    user: {
      userConf: [],
      email: 'Benno.Jaborek@abprod.dvag.de',
      status: 'OK'
    }
  }
},
methods: {
  addToFavorites(event) {
    event.preventDefault()
    const getHref = event.target.parentElement.parentElement.href
    const getName = event.target.parentElement.children[1].innerText
    const isExist = this.user.userConf.some(el => el.name === getName)
    if (!isExist) {
      this.user.userConf.push({ name: getName, link: getHref })
      Bus.$emit('favorites-updated', this.user.userConf)
    }
  }
}

3. Update TopNavbar to listen for the event and update its local data:

<!-- TopNavbar.vue -->
<li v-for="fav in getAddedFavorites" :key="fav.name">
  <a :href="fav.link"> {{ fav.name }} </a>
</li>
<script>
import Bus from './bus.js'

export default {
  data() {
    return {
      getAddedFavorites: [],
      activeNotifications: false
    }
  },
  mounted() {
    // Listen for updates
    Bus.$on('favorites-updated', (updatedFavorites) => {
      this.getAddedFavorites = [...updatedFavorites] // Spread to trigger reactivity
    })
  },
  beforeDestroy() {
    // Clean up listener to avoid memory leaks
    Bus.$off('favorites-updated')
  }
}
</script>

Quick Note on Your Original Code #

Importing and registering the Overview component in TopNavbar doesn't share their data—each component instance has its own isolated data object. That's why your initial approach didn't reflect updates.

内容的提问来源于stack exchange，提问作者Marin Terziyski