如何使用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 相关文章推荐
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
angularJS开发注意事项
May 26 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
JS实现可控制的进度条
Mar 25 Javascript
mapboxgl实现带箭头轨迹线的代码
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
Zend Framework页面缓存实例
2014/06/25 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
python ElementTree 基本读操作示例
2009/04/09 Python
Python对数据库操作
2016/03/28 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python实现的建造者模式示例
2018/08/06 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
python SocketServer源码深入解读
2019/09/17 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
大学自主招生自荐信
2013/12/16 职场文书
物流司机岗位职责
2013/12/28 职场文书
八年级物理教学反思
2014/01/19 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
股东授权委托书
2014/10/15 职场文书
公司员工安全协议书
2014/11/21 职场文书
老人与海读书笔记
2015/06/26 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA