vue解决父组件向子组件传参,子组件中拿不到值的解决方法
做项目时候遇到一件怪事:父组件向子组件传个参数arrdata,是个数组因为是Array类型的参数,子组件中进行了接收,并且default通过函数返回一个空数组然后子组件中例行公事验证下是否正常拿到值惊呆了,竟然是空的数组!可是vue调试工具中props正常拿到了啊有点意思,后来根据项目结构想了一下,发现问题出在哪里了项目是这样的:这就是父组件所在的页面,点击蓝色按钮新增,会触发回调方法,显示子组件
·
父组件LoginWeb调用子组件CodeLogin
<el-tab-pane label="验证码登录" name="second">
<CodeLogin
@refreshRsaKey="refreshRsaKey"
:publicKeyCode="publicKeyCode"
/>
</el-tab-pane>
...
async handleRSAKey() {
const params = {
data: {},
};
const { code, data } = await getRSAKey(params);
if (code !== 0 || !data) {
this.$message.error('系统异常,请刷新重试!');
return;
}
this.publicKeyCode = data;
},
由此可见传值的 publickey是通过接口异步拿到的,所以在子组件的mounted获取是undefined
那么我们加一个v-if, 让此值有值才可让他渲染, 有值后才走子组件的生命周期
<el-tab-pane label="验证码登录" name="second">
<CodeLogin
@refreshRsaKey="refreshRsaKey"
:publicKeyCode="publicKeyCode"
v-if="publicKeyCode.length"
/>
</el-tab-pane>
v-if="publicKeyCode.length"
更多推荐
已为社区贡献9条内容
所有评论(0)