vue进行兄弟之间的通信方式代码
时间: 2024-06-11 21:10:55 浏览: 9
在Vue中,兄弟组件之间的通信可以通过以下几种方式实现:
1. 使用事件总线
在Vue中,可以通过创建一个事件总线来实现组件之间的通信。事件总线是一个空的Vue实例,可以用来触发和监听事件。在父组件中创建事件总线,并将它作为props传递给子组件。子组件可以通过事件总线来触发事件,父组件可以通过事件总线监听这些事件。
// 父组件
<template>
<div>
<child-component :event-bus="eventBus"></child-component>
</div>
</template>
<script>
import Vue from 'vue'
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data () {
return {
eventBus: new Vue()
}
}
}
</script>
// 子组件
<template>
<div>
<button @click="sendMessage">发送消息</button>
</div>
</template>
<script>
export default {
props: ['eventBus'],
methods: {
sendMessage () {
this.eventBus.$emit('message', 'Hello World')
}
}
}
</script>
在父组件中监听事件:
created () {
this.eventBus.$on('message', message => {
console.log(message)
})
}
2. 使用Vuex
Vuex是Vue的官方状态管理库,可以用来管理组件之间的共享状态。在Vuex中,可以定义一个状态管理的store,所有组件都可以访问这个store中的状态。当一个组件改变了store中的状态,其他组件也会随之更新。
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: ''
},
mutations: {
setMessage (state, message) {
state.message = message
}
}
})
// 父组件
<template>
<div>
<button @click="sendMessage">发送消息</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations(['setMessage']),
sendMessage () {
this.setMessage('Hello World')
}
}
}
</script>
// 子组件
<template>
<div>{{ message }}</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['message'])
}
}
</script>
在父组件中使用mapMutations来映射Vuex中的mutation方法,子组件使用mapState来映射Vuex中的state状态。
3. 使用$parent和$children
在Vue中,每个组件都有一个$parent属性,可以用来访问父组件,同时也有一个$children属性,可以用来访问子组件。通过这两个属性,可以实现兄弟组件之间的通信。
// 父组件
<template>
<div>
<child-component></child-component>
<sibling-component></sibling-component>
</div>
</template>
// 子组件
<template>
<div>
<button @click="$parent.sendMessage">发送消息</button>
</div>
</template>
// 兄弟组件
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data () {
return {
message: ''
}
},
created () {
this.$parent.$on('message', message => {
this.message = message
})
}
}
</script>
在子组件中通过$parent属性访问父组件的方法,从而实现向兄弟组件发送消息。在兄弟组件中通过$parent.$on来监听父组件的消息,从而更新自己的状态。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)