情景介绍
业务需求得做一个刷题单选框的组件,选中错误自动显示正确的。思路父组件监听题目的变化更新选项list,子组件深度监听proprs数据,变化的时候及时更新视图。但是发现一个问题,判断题的选项是一样的导致我渲染第一个题的时候无法操作下一题的选项,组件没有更新视图。
解决办法:将子组件深度监听里的逻辑封装成方法,由父组件每次更新数据的时候强心渲染子组件,解决选项list一样的时候深度监听不调用方法。
父组件
<selectOptions ref="options" @ok="change"></selectOptions>
监听数据逻辑
this.$refs.options.updateOptions(this.optionList,this.answer,this.answerFlag);
子组件方法
之前错误的思路
watch:{
optionList: {
deep: true, // 需要深度监听
handler(newValue,oldValue){
// 更新数据
this.u_answer = this.answerFlag;
if(this.u_answer){
this.checkanswer = ['/']; // 回显的特殊处理
}else{
this.checkanswer = [];
}
this.value = [];
this.options = newValue;
}
},
},
新思路(忽略我的参数命名,写文章的时候方便。)
// 更新数据
updateOptions(d,a,f){
console.log("刷新")
// 更新数据
this.u_answer = f;
if(a){
this.checkanswer = ['/']; // 回显的特殊处理
}else{
this.checkanswer = [];
}
this.value = [];
this.options = d;
},