1

I watched a video to understand how to use event bus to communicate between siblings, and in the video there was a parent with some data that was sent to the childs as a prop, then a method in one of the childs modified that prop and used an event bus to send it to the other child.

I thought, whats the point of the prop? Why cant i just use the siblings own data? And thats what i did:

main.js

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

Vue.config.productionTip = false

export const bus = new Vue() //Event Bus

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

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <ComponenteA></ComponenteA>
    <ComponenteB></ComponenteB>
  </div>
</template>

<script>
import ComponenteA from './components/ComponenteA.vue'
import ComponenteB from './components/ComponenteB.vue'

export default {
  name: 'App',
  components:{
    ComponenteA,
    ComponenteB
  }
}
</script>

ComponentA.vue

<template>
    <div>
        <h1 @click="changeTitle">Componente A</h1>
    </div>
</template>

<script>
import { bus } from '../main'

export default {
    name: 'ComponenteA',
    data(){
        return{
            title: ''
        }
    },
    methods:{
        changeTitle(){
            this.title = 'Title emitted from A a B'
            bus.$emit('titleChanged',this.title)
        }
    }
}
</script>

ComponentB.vue

<template>
    <div>
        <h1>Componente B -> {{title}}</h1>
    </div>
</template>

<script>
import { bus } from '../main'

export default {
    name: 'ComponenteB',
    data(){
        return{
            title: ''
        }
    },
    created(){
        bus.$on('titleChanged', (payload) =>{
            this.title = payload
        })
    }
}
</script>

Is there anything wrong with my code? Is there a reason for using the parent data that im failing to see?

0 Answers