如何使用vuex实现兄弟组件通信

 更新时间:2018年11月02日 11:50:37   作者:bluesboneW   我要评论
这篇文章主要给大家介绍了关于如何使用vuex实现兄弟组件通信的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

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了,源码链接预览链接 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • vue实现全匹配搜索列表内容

    vue实现全匹配搜索列表内容

    这篇文章主要为大家详细介绍了vue实现全匹配搜索列表内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Vue 重置组件到初始状态的方法示例

    Vue 重置组件到初始状态的方法示例

    这篇文章主要介绍了Vue 重置组件到初始状态的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vuex + keep-alive实现tab标签页面缓存功能

    vuex + keep-alive实现tab标签页面缓存功能

    这篇文章主要介绍了vuex + keep-alive实现tab标签页面缓存功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • vue组件中点击按钮后修改输入框的状态实例代码

    vue组件中点击按钮后修改输入框的状态实例代码

    要求点击修改按钮之后部分输入框由禁用状态变为可用状态。下面我给大家分享一段实例代码基于vue组件中点击按钮后修改输入框的状态,需要的的朋友参考下
    2017-04-04
  • vue watch自动检测数据变化实时渲染的方法

    vue watch自动检测数据变化实时渲染的方法

    本篇文章主要介绍了vue watch自动检测数据变化实时渲染的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 详解element-ui日期时间选择器的日期格式化问题

    详解element-ui日期时间选择器的日期格式化问题

    这篇文章主要介绍了详解element-ui日期时间选择器的日期格式化问题,本文用到了DateTimePicker来选择日期时间,但是在将数据传回后台的过程中遇到了一些令人头疼的问题,有兴趣的一起来了解一下
    2019-04-04
  • vue 基于element-ui 分页组件封装的实例代码

    vue 基于element-ui 分页组件封装的实例代码

    这篇文章主要介绍了vue 基于element-ui 分页组件封装的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • vue递归组件实战之简单树形控件实例代码

    vue递归组件实战之简单树形控件实例代码

    这篇文章主要介绍了vue递归组件实战之简单树形控件的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue.js中过滤器的使用教程

    vue.js中过滤器的使用教程

    过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。下面这篇文章主要给大家介绍了关于vue.js中过滤器使用的相关资料,需要的朋友可以参考借鉴,下面来看看详细的介绍。
    2017-06-06
  • Vuejs开发环境搭建及热更新【推荐】

    Vuejs开发环境搭建及热更新【推荐】

    Vue.js是目前很火的一个前端框架,采用MVVM模式设计,它是以数据驱动和组件化的思想构建的。本文重点给大家介绍Vuejs开发环境搭建及热更新的相关知识,需要的朋友参考下吧
    2018-09-09

最新评论