如何使用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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
vue权限问题的完美解决方案
May 08 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
PHP中的日期处理方法集锦
2007/01/02 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
jquery实现数字输入框
2017/02/22 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
ES6新增的数组知识实例小结
2020/05/23 Javascript
python购物车程序简单代码
2018/04/18 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
python 实现视频 图像帧提取
2019/12/10 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
python爬虫要用到的库总结
2020/07/28 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
迎接领导欢迎词
2014/01/11 职场文书
自我鉴定书面格式
2014/01/13 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
经典广告词大全
2014/03/14 职场文书
供货协议书
2014/04/22 职场文书
校运会加油稿大全
2015/07/22 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers