Notify parallel Components about changes - vue.js

Question

i try to notify parallel components (rendered with v-for) about changes.
This is my markup:
<div v-for="item in items" :key="item.ID">
<my-component :item="item"></my-component>
</div>
And now, if for example something in the first instance of "my-component" changes all remaining "my-component"s should be notified about his change. How can i achieve that?
(At the moment i use this.$root.$emit and this.$root.$on)
Thanks in advance for your help.

Answer 1

There are a few ways you can achieve this:
1. Use props
VueJS' data-flow patterns recommend passing props down and bubbling events up. You could use this pattern by having a prop that is passed down that notifies the child components about the change.
Parent
<div v-for="item in items" :key="item.ID">
<my-component :item="item" :last-modified="lastModified"></my-component>
</div>
Child
<script>
export default {
...
watch: {
lastModified (v) {
// Do something
}
}
}
</script>
2. Use Vuex
Another way to achieve this is to use Vuex for global state management. This is the recommended option particularly if you're already using Vuex to manage state.
Parent
<div v-for="item in items" :key="item.ID">
<my-component :item="item"></my-component>
</div>
Child
<script>
import { mapGetters } from 'vuex'
export default {
...
computed: {
mapGetters([
'lastModified'
]),
...
},
watch: {
lastModified (v) {
// Do something
}
}
}
</script>
2. Use $refs
Another simple way to achieve this on a small-scale is to use ref.
Parent
<template>
<div v-for="item in items" :key="item.ID">
<my-component :item="item" :last-modified="lastModified" ref="childComponents"></my-component>
</div>
</template>
<script>
export default {
...
watch: {
lastModified () {
for (const child of this.$refs.childComponents) {
child.onModified()
}
}
}
}
</script>
Child
export default {
...
methods: {
onModified () {
// Do something
}
}
}
4. Use an event bus
This is a very handy way of achieving event propagation, but is not recommended. For this approach, we will create a third component, that is a simple vue instance that will be used for events.
bus.vue
import Vue from 'vue'
export default new Vue()
Parent
<template>
<div v-for="item in items" :key="item.ID">
<my-component :item="item"></my-component>
</div>
</template>
<script>
import Bus from 'bus'
export default {
...
watch: {
lastModified () {
Bus.$emit('modified')
}
}
}
</script>
Child
<script>
import Bus from 'bus'
export default {
...
methods: {
onModified () {
// Do something
}
},
beforeMount () {
Bus.$on('modified', this.onModified)
},
beforeDestroy () {
Bus.$off('modified', this.onModified)
}
}
</script>