用于在同级之间进行通信的事件总线。我需要父母及其数据作为道具发送吗？

Question

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

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

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>

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

Answer 1

数据应该存在于父级上然后传递给子级的原因是由于以下几点：

A：Vue.js中的反应性系统是围绕将数据放在一个位置（“单一事实来源”），然后将数据传递到需要的地方而构建的。现在;如果只有一个组件需要数据，则只需将该数据存储在组件上。但是，如果您需要多个组件中的数据，则需要将其存储在父级中，然后将其传递给子级。如果您需要开始使用Vuex，这一点尤其明显。

B：如果由于某些原因需要更改数据名称（例如pageTitle而不是title），那么如果数据始终在父级中，则跟踪数据的来源变得容易得多。随着项目规模的扩大，仅在兄弟姐妹之间使用事件总线就会变得非常脆弱。

因此，在您的情况下，title应该确实存在于data组件的App.vue中。每个孩子都会将其作为道具导入，然后，如果标题更改，则会发出App.vue正在监听的事件。该事件将更改App.vue中的数据。

查看此问题以获取更多详细信息：vuejs update parent data from child component