事件总线用于兄弟姐妹之间的通信。我需要 parent 及其数据作为道具发送吗?
Event Bus to communicate between siblings. Do i need a parent and its data sent as prop?
我看了一个视频来了解如何使用事件总线在兄弟姐妹之间进行通信,视频中有一个 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 数据是否有原因?
数据应该从 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 带有一些作为道具发送给 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 数据是否有原因?
数据应该从 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
.
查看此问题了解更多详情: