最近在做登录部分时遇到一个场景,当点击”用户”按钮时,首先渲染登录组件,在用户登录后直接跳转到用户信息界面(用户组件)。这里遇到了需要将登录组件通过异步请求获得的用户信息传向用户组件,但是登录和登录组件不是父子组件,就暂称为兄弟组件吧。简而言之,我要解决的就是兄弟组件之间的信息传递问题。
//位于登录。vue中
出口默认{
方法:{
登录(){
美元。axios ({
方法:“文章”,
url:/学生/登录/,
数据:{
用户名:this.username,
密码:this.password
}
}）
不要犹豫(函数(响应){
美元。路由器。替换({路径:“用户”});
}.bind(这))
.catch(函数(错误){
console.log(错误);
alert('用户名或密码错误的);
});
}
}
}
在异步请求完成后,就跳转到用户组件中,但是响应的请求返回信息就无法传到非父子组件的用户组件中。
.............................................................................................................................................................................................................
<强>一,首先我想到了将登录组件和用户组件放到一起(两个组件合2为1),加避免了组件间的信息传递,但是这种解决方案太低,破坏了项目原有的结构。
<强>二,查文档得知了
非父子关系的两个组件之间也需要通信。在简单的场景下,可以使用一个空的Vue实例作为事件总线:,
var总线=new Vue ()
一个中//触发组件的事件
公共汽车。发出(id-selected, 1)美元//在组件B创建的钩子中监听事件
公共汽车。美元(id-selected,函数(id) {//?
})
以自己遇到的问题为例,写出具体的实现:(警告:,我自己遇到的情况不能用这种简单的方式解决)
最好先新建一个js文件,来创建出我们的eventBus,我们把它命名为bus.js
从“进口Vue Vue ';
出口默认新Vue ();之前
然后在登录。vue文件中:
//位于登录。vue中
从“. ./bus.js”进口汽车;
出口默认{
方法:{
登录(){
美元。axios ({
方法:“文章”,
url:/学生/登录/,
数据:{
用户名:this.username,
密码:this.password
}
}）
不要犹豫(函数(响应){/*
*这里的“登录”是在总线中自己构造的一个事件(不需要在别处申明),通过排放()函数
*手动触发这个事件,然后在用户。vue中可以监听这个事件,一旦发现事件触发,就可以利用
*回调函数接收响应这个对象,达到信息传递的目的
* */公共汽车。美元发出(“登陆”,响应);
美元。路由器。替换({路径:“用户”});
}.bind(这))
.catch(函数(错误){
console.log(错误);
alert('用户名或密码错误的);
});
}
}
}
在user.vue文件中:
//位于用户。vue中
从“. ./bus.js”进口汽车;
出口默认{
未安装:{
公共汽车。美元(“登陆”,消息=比;{//这里的消息就是从login.vue中传来的数据
console.log(消息);
});
}
}
这样就完成了数据传递。
但是在测试时发现在用户。vue组件的监听没有被触发
分析:在我遇到的情境中,login.vue组件和用户。vue组件是互相替代的关系,即需要从登录组件通过vue-router跳转到用户组件,在login.vue销毁后才开始渲染user.vue组件,所以在user.vue中的
公共汽车。美元(“登陆”,消息=比;之前
监听是在事件以及触发之后才开始,自然不会产生回调函数。
由此可以看的出,官方推荐的eventbus解决方案的缺陷在于,在数据传递过程中,两个组件必须都已经被渲染过。我的这种情景下,这种方法不适用。
<>强,三,vuex解决方案:
,熟悉vuex的大佬们请直接跳过吧。
最好在src的根目录下新建一个文件,叫store.js
//位于商店。js中
从“Vue”进口Vue
从“Vuex”进口Vuex
Vue.use (Vuex);
出口默认新Vuex.Store ({/*
*国家指的就是储存的数据,
*下面的数据是我在项目中需要用的数据字段
* */状态:{
has_login:假的,
id: 1、
mobile_num:”,
名称:“
},/*
*突变里面规定的就是想要改变状态(数据)的动作函数,
*下面的user_message就是我将传入的信息赋值给仓库中的
*状态数据字段,达到更新数据的目的
* */突变:{
user_message(状态,消息){
状态。has_login=true;
状态。id=message.data.id;
状态。mobile_num=message.data.mobile_num;
state.name=message.data.name;
}
}
})
