如何使用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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
Require.js的基本用法详解
Jul 03 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
回顾Javascript React基础
Jun 15 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
一贴学会PHP 新手入门教程
2009/08/03 PHP
一个PHP的String类代码
2010/04/20 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
大学军训感言800字
2014/02/27 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
总结Python使用过程中的bug
2021/06/18 Python
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android