如何使用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 相关文章推荐
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
javascript与有限状态机详解
May 08 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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 字符串函数收集
2010/03/29 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Django model反向关联名称的方法
2018/12/15 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
MySQL面试题目集锦
2016/04/14 面试题
销售人员中英文自荐信
2013/09/22 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
文明寝室标语
2014/06/13 职场文书
学校师德师风整改措施
2014/10/27 职场文书
出国签证在职证明范本
2014/11/24 职场文书
逃课检讨书
2015/01/26 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
校运会班级霸气口号
2015/12/24 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
python实现双向链表原理
2022/05/25 Python