Event Bus для общения между братьями и сестрами. Нужен ли мне родитель и его данные, отправленные как проп? - PullRequest
Новая
       41

Event Bus для общения между братьями и сестрами. Нужен ли мне родитель и его данные, отправленные как проп?

1 голос
/ 03 марта 2020

Я смотрел видео, чтобы понять, как использовать шину событий для связи между братьями и сестрами, и в видео был родитель с некоторыми данными, которые были отправлены дочерним элементам в качестве подпорки, затем метод в одном из дочерних элементов изменил это prop и использовал шину событий, чтобы отправить ее другому ребенку.

Я подумал, какой смысл в опоре? Почему я не могу просто использовать собственные данные братьев и сестер? И вот что я сделал:

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')

Приложение. 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>

Что-то не так с моим кодом? Есть ли причина для использования родительских данных, которые я не вижу?

1 Ответ

4 голосов
/ 03 марта 2020

Причина, по которой данные должны начинаться с родительского элемента и передаваться потомкам, заключается в нескольких вещах:

  • Система реактивности в Vue. js построено вокруг хранения ваших данных в одном месте («единый источник правды»), а затем передачи этих данных туда, где они необходимы. Теперь, если данные нужны только компоненту single , вы просто сохраните эти данные в компоненте. Но данные нужны в нескольких компонентах, вы хотите сохранить их в родительском, а затем передать их дочерним элементам. Это становится особенно очевидным, если вам нужно начать использовать Vuex.

  • Если по какой-то причине вам необходимо изменить, скажем, имя данных (например, pageTitle вместо title) становится намного проще отследить, откуда поступили данные, если они всегда исходят от родителя. Опора на шину событий между братьями и сестрами может стать довольно хрупкой по мере роста проекта.

Итак, в вашем случае title действительно должен существовать в data вашего App.vue компонент. Каждый из детей получит это как опору. Затем, если title был изменен, $emit() событие, которое App.vue ожидает. Это событие изменит данные в App.vue.

. Посмотрите на этот вопрос для получения более подробной информации:
vuejs обновить родительские данные из дочернего компонента

...