需求
未登陆情况下查看详情时不显示用户名,此时详情页面未关闭。点击购买时由于未登陆所有谈登陆框,登陆成功后,不需要刷新,用户名也可以在刚才未关闭的详情页面上显示!
登陆成功后:
我这首先 登陆和商品详情不是一个组件,所有商品详情是父组件A,登陆页面是子组件B,登陆成功后B=>A 传递成功的用户名,告诉A拿到用户名后在商品详情页面显示出来。这里B=>A 传递数据利用组件自定义事件做就行本篇幅不赘述。办法:登陆页面出来时,没有用户名的详情页早已出现说明mounted已经执行完了,因为只是用户名的改变,所有这里用钩子函数beforeUpdate
。传过来的值用beforeUpdate
接收,收到之后在利用watch监控详情页面组件的用户名属性即可。
具体代码:
this.yonghuming
是 子组件Login传过来
//未登陆情况下查看详情时不显示用户名,此时详情页面未关闭。点击购买时由于未登陆所有谈登陆框,登陆成功后,不需要刷新用户名也可以在刚才未关闭的详情页面上显示!
beforeUpdate(){
this.shangping.yonghuname = this.yonghuming;
},
watch: {
'shangping.yonghuname': {
handler(newvalue,oldvalue) {
console.log("watch:",oldvalue)
this.shangping.yonghuname = newvalue;
if(this.shangping.yonghuname !=''){
this.isXiangQinYonghu = true;
}else{
this.isXiangQinYonghu = false;
}
}
}
},
watch的属性 如果是 对象.属性 这类的,则用 ’ ’ 包裹