Vue 两个组件已经渲染完的页面,一个组件数据变更另一个组件也变更

需求

未登陆情况下查看详情时不显示用户名，此时详情页面未关闭。点击购买时由于未登陆所有谈登陆框，登陆成功后，不需要刷新，用户名也可以在刚才未关闭的详情页面上显示！


登陆成功后：

我这首先 登陆和商品详情不是一个组件，所有商品详情是父组件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;
	         }
		  }
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

watch的属性 如果是 对象.属性 这类的，则用 ’ ’ 包裹