如何使用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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
js实现双人五子棋小游戏
May 28 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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 socket编程
2015/05/13 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
原生js开发的日历插件
2017/02/04 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
python读写二进制文件的方法
2015/05/09 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
python 弧度与角度互转实例
2020/04/15 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
python如何实时获取tcpdump输出
2020/09/16 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
学生会部长竞聘书
2014/03/31 职场文书
团队拓展活动方案
2014/08/28 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
群众路线专项整治方案
2014/10/27 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
祝酒词范文
2015/08/12 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL