vue非父子组件通信问题及解决方法
问题描述：
最近在做登录部分时遇到一个场景，当点击“用户”按钮时，首先渲染login组件，在用户登录后直接跳转到用户信息界面（user组件）。这里遇到了需要将login组件通过异步请求获得的用户信息传向user组件，但是login和login组件不是父子组件，就暂称为兄弟组件吧。简而言之，我要解决的就是兄弟组件之间的信息传递问题。
//位于login.vue中
exportdefault{
methods:{
login(){
this.$axios({
method:'post',
url:'/student/login/',
data:{
username:this.username,
password:this.password
}
})
.then(function(response){
this.$router.replace({path:'user'});
}.bind(this))
.catch(function(error){
console.log(error);
alert('用户名或密码错误');
});
}
}
}
在异步请求完成后，就跳转到user组件中，但是response的请求返回信息就无法传到非父子组件的user组件中。
.............................................................................................................................................................................................................
解决问题：
一、首先我想到了将login组件和user组件放到一起（两个组件合2为1），加避免了组件间的信息传递，但是这种解决方案太low，破坏了项目原有的结构。
二、查文档得知了
非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的Vue实例作为事件总线：
varbus=newVue()
//触发组件A中的事件
bus.$emit('id-selected',1)
//在组件B创建的钩子中监听事件
bus.$on('id-selected',function(id){
//...
})
以自己遇到的问题为例，写出具体的实现：（warning: 我自己遇到的情况不能用这种简单的方式解决）
最好先新建一个js文件，来创建出我们的eventBus，我们把它命名为bus.js
importVuefrom'vue'; exportdefaultnewVue();
然后在login.vue文件中：
//位于login.vue中
importBusfrom'../bus.js';
exportdefault{
methods:{
login(){
this.$axios({
method:'post',
url:'/student/login/',
data:{
username:this.username,
password:this.password
}
})
.then(function(response){
/*
*这里的'login-on'是在Bus中自己构造的一个事件（不需要在别处申明），通过emit()函数
*手动触发这个事件，然后在user.vue中可以监听这个事件，一旦发现事件触发，就可以利用
*回调函数接收response这个对象，达到信息传递的目的
**/
Bus.$emit('login-on',response);
this.$router.replace({path:'user'});
}.bind(this))
.catch(function(error){
console.log(error);
alert('用户名或密码错误');
});
}
}
}
在user.vue文件中：
//位于user.vue中
importBusfrom'../bus.js';
exportdefault{
mouted:{
Bus.$on('login-on',message=>{//这里的message就是从login.vue中传来的数据
console.log(message);
});
}
}
这样就完成了数据传递。
但是在测试时发现在user.vue组件的监听没有被触发
分析：在我遇到的情境中，login.vue组件和user.vue组件是互相替代的关系，即需要从login组件通过vue-router跳转到user组件，在login.vue销毁后才开始渲染user.vue组件，所以在user.vue中的
Bus.$on('login-on',message=>
监听是在事件以及触发之后才开始，自然不会产生回调函数。
由此可以看出，官方推荐的eventbus解决方案的缺陷在于，在数据传递过程中，两个组件必须都已经被渲染过。我的这种情景下，这种方法不适用。
三、vuex解决方案：
熟悉vuex的大佬们请直接跳过吧。
最好在src的根目录下新建一个文件，叫store.js
//位于store.js中
importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex);
exportdefaultnewVuex.Store({
/*
*state指的就是储存的数据，
*下面的数据是我在项目中需要用的数据字段
**/
state:{
has_login:false,
id:1,
mobile_num:'',
name:''
},
/*
*mutations里面规定的就是想要改变state(数据)的动作函数，
*下面的user_message就是我将传入的message赋值给仓库中的
*state数据字段，达到更新数据的目的
**/
mutations:{
user_message(state,message){
state.has_login=true;
state.id=message.data.id;
state.mobile_num=message.data.mobile_num;
state.name=message.data.name;
}
}
})
然后在login.vue组件中，提交收到的用户信息
//位于login.vue中
importuserMessagefrom'../store';
exportdefaultnewVuex.Store({
methods:{
loginSubmit(){
this.$axios({
method:'post',
url:'/student/login/',
data:{
username:this.username,
password:this.password
}
})
.then(function(response){
//这里调用store.js中mutations里面的user_message函数，从而改变仓库中的state数据
userMessage.commit('user_message',response);
this.$router.replace({path:'user'});
}.bind(this))
.catch(function(error){
console.log(error);
alert('用户名或密码错误');
});
}
})
最后在user.vue组件中接收vuex仓库中存储的信息，即先引入仓库
//位于user.vue中 importuserMessagefrom'../store';
然后可以直接将userMessage.state赋值给user.vue作用域中的数据字段，同时，vuex的state有热更新的属性，对于数据的同步很有帮助，优点良多。
所以，中大型的项目还是在一开始就直接使用vuex是明智的决定，对于开发有很大的便利。
总结
以上所述是小编给大家介绍的vue非父子组件通信问题解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！