如何使用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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
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与MySQL交互使用详解
2006/10/09 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
轻松实现python搭建微信公众平台
2016/02/16 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
怎么写好自荐信
2013/10/30 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
初中生自我鉴定
2014/02/04 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
Django显示可视化图表的实践
2021/05/10 Python
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python