如何使用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 相关文章推荐
DOM精简教程
Oct 03 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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生成月历代码
2007/06/14 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
浅析Python迭代器的高级用法
2020/07/16 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
个人简历自我鉴定
2013/10/11 职场文书
禁毒宣传标语
2014/06/19 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
格林童话读书笔记
2015/06/30 职场文书
婚礼家长致辞
2015/07/27 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
python urllib库的使用详解
2021/04/13 Python
python创建字典及相关管理操作
2022/04/13 Python