vue非父子组件通信问题及解决方法
前端之家收集整理的这篇文章主要介绍了
vue非父子组件通信问题及解决方法,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_4030@问题描述:
@H
403_0@最近在做
登录部分时遇到一个场景,当点击 “
用户”按钮时,首先渲染login组件,在
用户登录后直接
跳转到
用户信息界面(user组件)。这里遇到了需要将login组件通过异步请求获得的
用户信息传向 user组件,但是login和login组件不是父子组件,就暂称为兄弟组件吧。 简而言之,我要
解决的就是兄弟组件之间的信息传递问题。
<div class="jb51code">
<pre class="brush:js;">
//位于login.vue 中
export default {
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('
用户名或密码
错误');
});
}
}
}
@H_
403_0@在异步请求完成后,就
跳转到user组件中,但是response的请求返回信息就无法传到非父子组件的user组件中。
@H_
403_0@.............................................................................................................................................................................................................
@H_
403_0@
@H_
403_0@
一、首先我想到了将login组件 和 user组件放到一起(两个组件合2为1),加避免了组件间的信息传递,但是这种解决方案太low,破坏了项目原有的结构。
@H_
403_0@
二、查文档得知了
@H_
403_0@非父子关系的两个组件之间也需要通信。在简单的场景下,可以使用一个空的 Vue 实例作为事件总线:
@H_
403_0@以自己遇到的问题为例,写出具体的实现:(warning: 我自己遇到的情况不能用这种简单的方式
解决)
@H_
403_0@最好先新建一个js
文件,来创建出我们的eventBus,我们把它命名为bus.js
@H_
403_0@然后在 login.vue
文件中:
函数
* 手动触发这个事件,然后在user.vue 中可以监听这个事件,一旦发现事件触发,就可以利用
* 回调
函数接收 response 这个对象,达到信息传递的目的
* */
Bus.$emit('login-on',response);
this.$router.replace({path: 'user'});
}.bind(this))
.catch(function (error) {
console.log(error);
alert('
用户名或密码
错误');
});
}
}
}
@H_
403_0@在user.vue
文件中:
{ // 这里的message就是从login.vue中传来的数据
console.log(message);
});
}
}
@H_
403_0@这样就完成了数据传递。
@H_
403_0@但是在测试时发现在user.vue组件的监听 没有被触发
@H_
403_0@分析:在我遇到的情境中,login.vue组件和user.vue 组件是互相替代的关系,即需要从login组件通过vue-router
跳转到user组件,在login.vue销毁后才开始渲染user.vue组件,所以在user.vue中的
@H_
403_0@监听是在事件以及触发之后才开始,自然不会产生回调
函数。
@H_
403_0@由此可以看出,官方推荐的eventbus
解决方案的缺陷在于, 在数据传递过程中,两个组件必须都已经被渲染过。我的这种情景下,这种
方法不适用。
@H_
403_0@
三、vuex解决方案:
@H_
403_0@熟悉vuex的大佬们请直接跳过吧。
@H_
403_0@最好在src的根目录下新建一个
文件,叫 store.js
函数,
* 下面的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;
}
}
})
@H_
403_0@然后在login.vue组件中,提交收到的
用户信息
调用 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('
用户名或密码
错误');
});
}
})
@H_
403_0@最后在user.vue组件中接收vuex仓库中存储的信息,即先引入仓库
@H_
403_0@然后可以直接将 userMessage.state 赋值给user.vue作用域中的数据字段,同时,vuex 的state有热更新的
属性,对于数据的同步很有帮助,优点良多。
@H_
403_0@所以,中大型的项目还是在一开始就直接使用vuex是明智的决定,对于开发有很大的便利。
@H_
403_0@
总结
@H_
403_0@以上所述是小编给大家介绍的vue非父子组件通信问题
解决方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可
分享给好友!感谢
支持。