父组件:
<Component :is="sheet_editor" :show="drawer_status" />
data:{
drawer_status: [false, false],
sheet_editor: null,
}
子组件:
props:["show"],
methods:{
fetchData(){
//调用接口
}
},
watch:{
show(val){
if(val[0]){
this.fetchData()
}
}
}
上面写法由于监听的是一个数组,所以这样会使其this.fetchData()方法执行两次
如何避免这种窘况呢?
就是将其监听数据处理成基本数据类型
watch:{
watchShow(val){
if(val){
this.fetchData()
}
}
}
computed: {
watchShow() {
return this.show[0];
}
}