欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何使用vuex实现兄弟组件通信

程序员文章站 2023-11-07 17:54:28
前言 vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值,需要先将值传给父组件,再传给子组件,异常麻烦。 下面这篇文章就来给大家介绍下vuex兄...

前言

vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值,需要先将值传给父组件,再传给子组件,异常麻烦。

下面这篇文章就来给大家介绍下vuex兄弟组件通信的方法,下面话不多说了,来一起看看详细的介绍吧

1. 核心想法

使用vuex进行兄弟组件通信的核心思路就是将vuex作为一个store(vuex被设计的原因之一),将每个子组件的数据都存放进去,每个子组件都从vuex里获取数据,其实就是一句话——把vuex作为一个桥

2. 具体代码

父组件app.vue

<template>
 <div id="app">
 <childa/>
 <childb/>
 </div>
</template>

<script>
 import childa from './components/childa' // 导入a组件
 import childb from './components/childb' // 导入b组件

 export default {
 name: 'app',
 components: {childa, childb} // 注册a、b组件
 }
</script>

<style>
 #app {
 font-family: 'avenir', helvetica, arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
 }

 div {
 margin: 10px;
 }
</style>

子组件childa

<template>
 <div id="childa">
 <h1>我是a组件</h1>
 <button @click="transform">点我让b组件接收到数据</button>
 <p>因为你点了b,所以我的信息发生了变化:{{bmessage}}</p>
 </div>
</template>

<script>
 export default {
 data() {
 return {
 amessage: 'hello,b组件,我是a组件'
 }
 },
 computed: {
 bmessage() {
 // 这里存储从store里获取的b组件的数据
 return this.$store.state.bmsg
 }
 },
 methods: {
 transform() {
 // 触发receiveamsg,将a组件的数据存放到store里去
 this.$store.commit('receiveamsg', {
  amsg: this.amessage
 })
 }
 }
 }
</script>

<style>
 div#childa {
 border: 1px solid black;
 }
</style>

子组件childb

<template>
 <div id="childb">
 <h1>我是b组件</h1>
 <button @click="transform">点我让a组件接收到数据</button>
 <p>因为你点了a,所以我的信息发生了变化:{{amessage}}</p>
 </div>
</template>

<script>
 export default {
 data() {
 return {
 bmessage: 'hello,a组件,我是b组件'
 }
 },
 computed: {
 amessage() {
 // 这里存储从store里获取的a组件的数据
 return this.$store.state.amsg
 }
 },
 methods: {
 transform() {
 // 触发receivebmsg,将b组件的数据存放到store里去
 this.$store.commit('receivebmsg', {
  bmsg: this.bmessage
 })
 }
 }
 }
</script>

<style>
 div#childb {
 border: 1px solid green;
 }
</style>

vuex模块store.js

import vue from 'vue'
import vuex from 'vuex'

vue.use(vuex)

const state = {
 // 初始化a和b组件的数据,等待获取
 amsg: '',
 bmsg: ''
}

const mutations = {
 receiveamsg(state, payload) {
 // 将a组件的数据存放于state
 state.amsg = payload.amsg
 },
 receivebmsg(state, payload) {
 // 将b组件的数据存放于state
 state.bmsg = payload.bmsg
 }
}

export default new vuex.store({
 state,
 mutations
})

我把所有的代码+注释都放在github了,,

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。