VUE-解决切换页面后，子组件通过props获取的父组件数据不同步的问题

Vue貌似很多场景，页面刷新后数据丢失。此文介绍路由子组件获取父组件的属性在刷新页面后丢失的解决办法。

• 场景描述

笔者最近的项目中，有一组页面数据需要互相共享，于是在路由父组件中通过props属性传递数据到各个子组，保证了各个页面的一致性。A子组件即A子页面修改了数据后，在页面切换后，B子组件获取的数据还是旧的初始属性，不能保证各个子页面数据的一致性。

// 子组件通过prop获取数据
<router-view :casedetail="casedetail"
:scheduleInfo="scheduleInfo"
:basicInfoForm="basicInfoForm"
:marformationParamForm="marformationParamForm"
:positionValue="positionValue"
:deviceParamForm="deviceParamForm"
:installParamForm="installParamForm"
:structLengthForm="structLengthForm"
:targetMarformationParamForm="targetMarformationParamForm"
:correctTimeForm="correctTimeForm"
:precriptionList="precriptionList"
:formValueHasChanged="formValueHasChanged"
:cjxFormValueHasChanged="cjxFormValueHasChanged"
:allDisabledFlag="allDisabledFlag"
:scheduleLoading="scheduleLoading"
@postFormData="setFormData"
@closeCurStep="closeCurStep"
@prevStepFn="prevStepFn"
@jumpToNextStep="jumpToNextStep"
@saveAsFn="saveAsFn"
ref="childStep" />

• 解决办法

想到的解决办法就是，在A子页面修改了数据后，将数据同步到父组件，在切换页面后，B子页面获取到的是最新的数据。

在子组件中定义方法postFormData，在basicInfoForm数据改变时，可以将数据通过父组件监听的postFormData方法传递给父组件

//向父亲组件传递参数
postFormData: function(){
this.$emit('postFormData', 'basicInfoForm',this.basicInfoForm);
},

在父组件中定义

// 在路由子组件中监听postFormData方法
@postFormData="setFormData"

//设置子组件传递的数据
setFormData: function(formName,formData){
var that = this;
if(formName == 'basicInfoForm'){
that.basicInfoForm = formData;
}
}

• 总结

最终实现的效果就是A子页面修改了数据后，切换到B页面后，是新的数据。本文简单的介绍了这个场景的解决方法，其实也是父子组件之间数据传递解决办法。