uni-app v-if 延迟渲染对子组件 slot 无效

k5hmc34c 于 2021-11-27 发布在 Java

关注(0)|答案(2)|浏览(972)

问题描述

父组件用了v-if，条件还没为true，子组件正常是不会渲染的
把if条件改为属性，用slot渲染子组件的时候，条件还没为true，子组件已经渲染了

复现步骤

[复现问题的步骤]

<hello :loaded="loaded" v-if="loaded">
      <text class="title">{{title}}</text>
</hello>

onLoad() {
            setTimeout(() => this.loaded = true, 3000)
        },

删掉v-if="loaded"，就报错了，title是故意没有定义的

<view>
        <slot v-if="loaded"></slot>
        <view v-else>正在加载</view>
</view>

预期结果

[使用简洁清晰的语言描述你希望生效的预期结果]

实际结果

[这里请贴上你的报错截图或文字]

系统信息:

补充信息

[可选]
[根据你的分析，出现这个问题的原因可能在哪里？]

2条答案

<template v-slot:default></template> 这种写法可以延迟渲染了，能解决问题。

<template #default></template> v-slot:default简写#default还是不行