Pass event from one component to other components - vue.js

Question

I'm really new to Vue and can't seem to get how an event is passed from one component to other components. I'm currently using v-blur and I want to blur every component except the one clicked. I figured by passing an event to the other components when the original component is clicked on i could get the effect wanted. Any help is much appreciated!
// Parent.vue
<template>
<div id="Parent">
<child-one #toggle-blur="toggleChildBlur"/>
<child-two #toggle-blur="toggleChildBlur"/>
<child-three #toggle-blur="toggleChildBlur"/>
</div>
</template>
<script>
import ChildOne from './ChildOne'
import ChildTwo from './ChildTwo'
import ChildThree from './ChildThree'
export default {
name: 'Parent',
components: {
ChildOne, ChildTwo, ChildThree
},
methods: {
toggleChildBlur () {
// Blur every child except the clicked one?
}
},
data () {
return {}
}
}
</script>
// ChildOne.vue, basically the same for two and three aswell
<template>
<div id="child-one" v-blur="blurConfig" #click="$emit('toggle-blur')"></div>
</template>
<script>
export default {
name: 'ChildOne',
methods: {
toggleBlur () {
this.blurConfig.isBlurred = !this.blurConfig.isBlurred;
}
},
data () {
return {
blurConfig: {
isBlurred: false,
opacity: 0.3,
filter: 'blur(1.2px)',
transition: 'all .3s linear'
}
}
}
}
</script>

Answer 1

Events dispatched in Vue travel in one direction: child ⇒ parent. If you have a component P (parent) and child C1 (child 1) and C2 (child 2), there is no way to trigger event in C1 and send it to C2. It will go to P.
If you have very nested structure (many levels) and you really need to do so, the easiest way to do it is to dispatch and listen for events on something that is not part of the display list, i.e. something global. Very typical solution is to have the so called "Event Bus" - a separate dummy Vue instance, that you use only for events. Here's a full tutorial about Global Event Bus in Vue.
It looks something like this:
// in some global file
const EventBus = new Vue();
// in GC1 (parent -> child 1 -> grand child 1)
EventBus.$emit('someEvent', 'some-data')
// in GC5 (parent -> child 3 -> grand child 5)
EventBus.$on('someEvent', function(data) {
console.log(data) // 'some-data
})
This way you can easily dispatch/catch events all over the place.
Good luck! :)

Answer 2

I figured out a way to get the effect i wanted in the end. My solution might not be very scalable but works for now! I pass the child index from the emitter and loop through to blur each component except the clicked child index.
// ChildOne.vue
// Basically the same for two and three as well except sending corresponding index
// on click event.
// Click event is now sending the index of the component to know which one got clicked.
<template>
<div id="child-one" #click="$emit('toggle-blur', 0)"></div>
</template>
// Parent.vue
// Every child component now gets their separate blur config.
// When child is clicked the index of the child now gets sent to help skip and blur
// the other components.
<template>
<div id="parent">
<child-one v-blur="blurConfig[0]" #toggle-blur="toggleChildBlur"/>
<child-two v-blur="blurConfig[1]" #toggle-blur="toggleChildBlur"/>
<child-three v-blur="blurConfig[2]" #toggle-blur="toggleChildBlur"/>
</div>
</template>
<script>
import ChildOne from './ChildOne'
import ChildTwo from './ChildTwo'
import ChildThree from './ChildThree'
export default {
name: 'Parent',
components: {
ChildOne, ChildTwo, ChildThree
},
methods: {
toggleChildBlur (childIndex) {
// Unblur if click event is outside focused component
if (this.blurConfig[childIndex].isBlurred) {
for (let i = 0; i < this.blurConfig.length; i++) {
this.blurConfig[i].isBlurred = false
}
} else {
for (let i = 0; i < this.blurConfig.length; i++) {
if (i !== childIndex) {
this.blurConfig[i].isBlurred = !this.blurConfig[i].isBlurred
}
}
}
}
},
data () {
return {
// Blur settings for each component
blurConfig: [
{
isBlurred: false,
opacity: 0.2,
filter: 'blur(1.2px)',
transition: 'all .2s linear'
},
{
isBlurred: false,
opacity: 0.2,
filter: 'blur(1.2px)',
transition: 'all .2s linear'
},
{
isBlurred: false,
opacity: 0.2,
filter: 'blur(1.2px)',
transition: 'all .2s linear'
}
]
}
}
}
</script>