事件总线用于兄弟姐妹之间的通信。我需要 parent 及其数据作为道具发送吗？

Question

我看了一个视频来了解如何使用事件总线在兄弟姐妹之间进行通信，视频中有一个 parent 带有一些作为道具发送给 child 的数据，然后 child 之一中的方法修改了该道具并使用事件总线将其发送到另一个 child.

我想，道具的意义何在？为什么我不能只使用兄弟姐妹自己的数据？这就是我所做的：

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>

我的代码有什么问题吗？使用我看不到的 parent 数据是否有原因？

Answer 1

数据应该从 parent 开始并向下传递到 children 的原因是因为以下几点：

Vue.js 中的反应系统是围绕将数据放在一个地方 ("single source of truth") 而构建的，然后将该数据传递到需要的地方。现在，如果只有单个组件需要数据，您只需将该数据存储在组件上即可。但是多个组件都需要数据，您需要将其存储在 parent 中，然后将其传递给 children。如果你需要开始使用 Vuex，这一点就变得尤为明显。
如果出于某种原因您需要更改数据名称（例如，pageTitle 而不是 title），那么跟踪位置就变得容易得多如果数据总是来自 parent，则数据来自。随着项目变大，依赖跨兄弟事件总线会变得相当脆弱。

因此，在您的情况下，title 应该确实存在于 App.vue 组件的 data 中。每个 children 都会收到它作为道具。然后，如果 title 被更改，$emit() 一个 App.vue 正在侦听的事件。该事件将更改 App.vue.

中的数据

查看此问题了解更多详情：

事件总线用于兄弟姐妹之间的通信。我需要 parent 及其数据作为道具发送吗？

Event Bus to communicate between siblings. Do i need a parent and its data sent as prop?

javascript

event-bus

vue.js