如何使用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 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
JSONP跨域请求
Mar 02 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
微信小程序(订阅消息)功能
Oct 25 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下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
JS中数组重排序方法
2016/11/11 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
python发送伪造的arp请求
2014/01/09 Python
Python sys.argv用法实例
2015/05/28 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
为什么需要版本控制?
2013/08/08 面试题
大学生自我鉴定
2013/12/16 职场文书
团日活动总结书格式
2014/05/08 职场文书
法院授权委托书格式
2014/09/28 职场文书
市场部经理岗位职责
2015/02/02 职场文书
民主生活会主持词
2015/07/01 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
Django操作cookie的实现
2021/05/26 Python
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技