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


Posted in Javascript onNovember 02, 2018

前言

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了,源码链接,预览链接 

总结

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

Javascript 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
Bootstrap响应式表格详解
May 23 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 #Javascript
vue头部导航动态点击处理方法
Nov 02 #Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 #Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 #Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 #Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 #Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 #Javascript
You might like
如何获得PHP相关资料
2006/10/09 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
Python机器学习之决策树算法实例详解
2017/12/06 Python
详解Python自建logging模块
2018/01/29 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
python生成九宫格图片
2018/11/19 Python
python打开windows应用程序的实例
2019/06/28 Python
kali中python版本的切换方法
2019/07/11 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
Python实现自动装机功能案例分析
2020/10/22 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
办公室年终个人自我评价
2013/10/28 职场文书
法制报告会主持词
2014/04/02 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
会议欢迎词
2015/01/23 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python