Javascript 用于在兄弟姐妹之间通信的事件总线。我是否需要家长及其数据作为道具发送？

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

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

main.js

App.vue

成分A.vue

组件b.vue

---

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

数据应该从父数据开始并传递给子数据的原因有两个：

Vue.js中的反应系统是围绕着将数据放在一个地方，一个真实的来源，然后将数据传递到任何需要的地方而构建的。现在，如果只有一个组件需要数据，您只需将该数据存储在该组件上。但是多个组件中需要数据，您需要将其存储在父组件中，然后将其传递给子组件。如果您需要开始使用Vuex，这一点就变得尤为明显

如果出于某种原因需要更改数据的名称，例如pageTitle而不是title，那么如果数据总是来自父级，那么跟踪数据的来源就会变得容易得多。随着项目规模的扩大，跨兄弟姐妹依赖事件总线可能变得相当脆弱

因此，在您的情况下，标题应该确实存在于App.vue组件的数据中。每个孩子都会得到它作为道具。然后，如果标题已更改，$emit将发出App.vue正在侦听的事件。该事件将更改App.vue中的数据

请查看此问题以了解更多详细信息：

---

数据应该从父级开始并传递给子级的原因有两个：

Vue.js中的反应系统是围绕着将数据放在一个地方，一个真实的来源，然后将数据传递到任何需要的地方而构建的。现在，如果只有一个组件需要数据，您只需将该数据存储在该组件上。但是多个组件中需要数据，您需要将其存储在父组件中，然后将其传递给子组件。如果您需要开始使用Vuex，这一点就变得尤为明显

如果出于某种原因需要更改数据的名称，例如pageTitle而不是title，那么如果数据总是来自父级，那么跟踪数据的来源就会变得容易得多。随着项目规模的扩大，跨兄弟姐妹依赖事件总线可能变得相当脆弱

因此，在您的情况下，标题应该确实存在于App.vue组件的数据中。每个孩子都会得到它作为道具。然后，如果标题已更改，$emit将发出App.vue正在侦听的事件。该事件将更改App.vue中的数据

请查看此问题以了解更多详细信息：

---

所以，在这种情况下，ComponentA发出一个事件，应用程序侦听并更新标题，该标题在ComponentB中呈现，因为它作为道具导入？所以，在这种情况下，ComponentA发出一个事件，应用程序侦听并更新标题，该标题在ComponentB中呈现，因为它作为道具导入？

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

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

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

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