使用vuex实现兄弟组件通信的方法

这篇文章给大家分享的是有关使用vuex实现兄弟组件通信的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联公司专业为企业提供清涧网站建设、清涧做网站、清涧网站设计、清涧网站制作等企业网站建设、网页设计与制作、清涧企业网站模板建站服务,十余年清涧做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

1. 核心想法

使用vuex进行兄弟组件通信的核心思路就是将vuex作为一个store(vuex被设计的原因之一),将每个子组件的数据都存放进去,每个子组件都从vuex里获取数据,其实就是一句话——把vuex作为一个桥

2. 具体代码

父组件App.vue





子组件ChildA





子组件ChildB





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

感谢各位的阅读!关于“使用vuex实现兄弟组件通信的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网站名称:使用vuex实现兄弟组件通信的方法
当前链接:http://myzitong.com/article/ipojhs.html