for example:
组件 A
:
// 组件A
<template>
<div>
xxxxxx
</div>
</template>
<script>
export default {
props: ['ownerType', ],
data() {
return {}
}
}
</script>
使用我们的组件 A
<template>
<div>
<A :ownerType="ownerType"></A>
</div>
</template>
<script>
import A from 'xxxxx';
export default {
components: {
A
}
data() {
return {
ownerType: ''
}
},
onLoad() {
// 页面加载时赋值ownerType
this.ownerType = 'user'
}
}
</script>
当我们这么使用的时候,有时候多次进入使用组件A这个页面,有时候会出现组件传递的值为 空
,
也就是我们 data
中设置的默认值,这可能是页面退出后组件没有被销毁,导致传值的时候,ownerType
还没被赋值!!!!!
我的笨一点的解决办法是,再 onLoad
中等待加载逻辑执行完成,再显示页面,也就是给最外层的div
添加一个判断,数据还没加载完成,就不显示页面。
伪代码如下:
<template>
<div v-if="SHOW">
<A :ownerType="ownerType"></A>
</div>
</template>
<script>
import A from 'xxxxx';
export default {
components: {
A
}
data() {
return {
SHOW: false,
ownerType: ''
}
},
onLoad() {
// 页面加载时赋值ownerType
this.ownerType = 'user'
//加载逻辑执行完成,再显示页面
this.SHOW = true
}
}
</script>