组件中 slot 外层设置 v-if 在页面中使用 slot 内的组件 ref 获取实例为 null

[zxj176381]

发行方式

小程序

具体平台

微信小程序

开发环境

macOS

项目创建方式

CLI命令行

依赖版本

"@dcloudio/uni-app": "3.0.0-4040520250104002",
"@dcloudio/uni-app-harmony": "3.0.0-4040520250104002",
"@dcloudio/uni-app-plus": "3.0.0-4040520250104002",
"@dcloudio/uni-components": "3.0.0-4040520250104002",
"@dcloudio/uni-h5": "3.0.0-4040520250104002",
"@dcloudio/uni-mp-alipay": "3.0.0-4040520250104002",
"@dcloudio/uni-mp-baidu": "3.0.0-4040520250104002",
"@dcloudio/uni-mp-jd": "3.0.0-4040520250104002",
"@dcloudio/uni-mp-kuaishou": "3.0.0-4040520250104002",
"@dcloudio/uni-mp-lark": "3.0.0-4040520250104002",
"@dcloudio/uni-mp-qq": "3.0.0-4040520250104002",
"@dcloudio/uni-mp-toutiao": "3.0.0-4040520250104002",
"@dcloudio/uni-mp-weixin": "3.0.0-4040520250104002",
"@dcloudio/uni-mp-xhs": "3.0.0-4040520250104002",
"@dcloudio/uni-quickapp-webview": "3.0.0-4040520250104002",

问题描述

<script lang="ts" setup>
import Page from '@/components/page/page.vue';
import Popup from '@/components/popup/popup.vue';

import MyTip from './components/my-tip/my-tip.vue';

const popupRef = ref<InstanceType<typeof Popup>>();
const pageRef = ref<InstanceType<typeof Page>>();

function openPopup() {
  popupRef.value?.open();
}
</script>

<template>
  <Page ref="pageRef">
    <template #page="{ isSuccess }">
      <div v-if="isSuccess">
        <view @click="openPopup">获取用户详情1</view>
        <MyTip />
        <Popup ref="popupRef">
          <view class="h-[400px] bg-white">123</view>
        </Popup>
      </div>
    </template>
  </Page>
</template>

popupRef 获取到为 undefined

重现步骤

isSuccess 初始化接口调用完成后才会为 true

期望行为

应该可以获取到实例

实际行为

获取到 undefined

截图或录屏

[zxj176381]

放到 Page 组件外层 就可以正常获取到 slot 加了 v-if 就不行了

[chouchouji]

放到 Page 组件外层 就可以正常获取到 slot 加了 v-if 就不行了

麻烦提供一个完整的复现demo

[zxj176381]

demo-1.zip

page slot 传入值以后，并且在 首页接受slot 接收的值以后，就会出现 undefined 这样的问题

把首页接受的“isShow”字段删除后就可以了，你看下 @chouchouji

[zxj176381]

放到 Page 组件外层 就可以正常获取到 slot 加了 v-if 就不行了

麻烦提供一个完整的复现demo

我为什么不在组件中使用 isShow 来判断是否显示呢
是因为，在组件内部判断的话，在页面中使用，如果 page组件中嵌套其他的组件的话，其他组件也会初始化，没有真正意义上的隐藏掉。

demo-2.zip

这个demo 可以复现 popup 中 onMounted 打印，初始化就打印了，而不是显示后才打印

[chouchouji]

测试了一下，确实有问题，web端这里能正常拿到ref

[zxj176381]

测试了一下，确实有问题，web端这里能正常拿到ref

微信小程序中 这个问题，你看我怎么修改 node_modules 能解决，我这边是 pnpm 开发的，这里临时修改。

---

还有第二个问题，也是一个问题，slot 每次都要抛出抛出去判断，始终不合理，

[zxj176381]

放到 Page 组件外层 就可以正常获取到 slot 加了 v-if 就不行了

麻烦提供一个完整的复现demo

我为什么不在组件中使用 isShow 来判断是否显示呢 是因为，在组件内部判断的话，在页面中使用，如果 page组件中嵌套其他的组件的话，其他组件也会初始化，没有真正意义上的隐藏掉。

demo-2.zip

这个demo 可以复现 popup 中 onMounted 打印，初始化就打印了，而不是显示后才打印

第二个问题能解决的话，第一个问题也就不复存在了

[chouchouji]

放到 Page 组件外层 就可以正常获取到 slot 加了 v-if 就不行了

麻烦提供一个完整的复现demo

我为什么不在组件中使用 isShow 来判断是否显示呢 是因为，在组件内部判断的话，在页面中使用，如果 page组件中嵌套其他的组件的话，其他组件也会初始化，没有真正意义上的隐藏掉。
demo-2.zip
这个demo 可以复现 popup 中 onMounted 打印，初始化就打印了，而不是显示后才打印

第二个问题能解决的话，第一个问题也就不复存在了

我明白了，你的问题其实是 组件没有渲染，但是内部的生命周期钩子已经执行了

[zxj176381]

放到 Page 组件外层 就可以正常获取到 slot 加了 v-if 就不行了

麻烦提供一个完整的复现demo

我为什么不在组件中使用 isShow 来判断是否显示呢 是因为，在组件内部判断的话，在页面中使用，如果 page组件中嵌套其他的组件的话，其他组件也会初始化，没有真正意义上的隐藏掉。
demo-2.zip
这个demo 可以复现 popup 中 onMounted 打印，初始化就打印了，而不是显示后才打印

第二个问题能解决的话，第一个问题也就不复存在了

我明白了，你的问题其实是 组件没有渲染，但是内部的生命周期钩子已经执行了

这两个都是问题，这个都要解决，只是第二个问题可以让第一个问题不出现而已

[zxj176381]

难免会遇到，slot 传值 这样的写法

[chouchouji]

难免会遇到，slot 传值 这样的写法

你试过其他小程序平台吗？