vue3 uni-app uni-popup 组件 slot插槽 prop传值数据 改变，内容就消失了

vue3 uni-app uni-popup 组件 slot插槽 prop传值数据 改变，内容就消失了

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

uniapp/H5

示例代码：

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area" @click="popOpen">
      <text class="title">{{title}}</text>
    </view>
    <ly-popup ref="popRef" :btnDis="btnDis"></ly-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const title = ref('点击弹出测试弹窗')  

const popRef = ref(null)  
const btnDis = ref(true)  
const popOpen = () => {
  console.log(popRef.value)  
  popRef.value.openCommPop()  
  setTimeout(() => {
    btnDis.value = false  
  }, 2000)  
}
</script>

<template>
  <uni-popup ref="popCommmRef" type="bottom">
    <slot>
      <view style="background-color: #FFFFFF;text-align: center;height: 200px;">
        测试弹窗内容
        <button type="primary" :disabled="props.btnDis">测按钮</button>  
      </view>  
    </slot>  
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  btnDis: false  
})

const popCommmRef = ref(null)  
const openCommPop = () => {
  popCommmRef.value.open()  
}

defineExpose({
  openCommPop  
})
</script>

操作步骤：

uni-popup 二次封装组件 使用插槽定义内容，prop传值，动态传入值， 父级改变值内容就消失了

预期结果：

动态改变值内容不消失

实际结果：

动态改变值内容就消失了

bug描述：

uni-popup 二次封装组件 使用插槽定义内容，prop传值，动态传入值， 父级改变值内容就消失了


更多关于vue3 uni-app uni-popup 组件 slot插槽 prop传值数据 改变，内容就消失了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

参考下这个问答：https://ask.dcloud.net.cn/question/154323

更多关于vue3 uni-app uni-popup 组件 slot插槽 prop传值数据 改变，内容就消失了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我看到了，但是这不应该是组件的bug,修复组件吗？

回复 FE_liyangyang: 是的 但是官方修复bug的话 时间不确定 你可以等官方修复好在用 或者 用别的方法先解决问题

回复 爱豆豆: 嘻嘻，谢谢喽，我意思就是提交上去这个bug,官方啥时候修是他的事

这个问题是由于uni-popup组件在prop值变化时会重新渲染导致的。解决方法如下：

  1. 避免在slot内部直接使用props值，改为在组件内部处理：
<!-- 子组件修改 -->
<template>
  <uni-popup ref="popCommmRef" type="bottom">
    <view style="background-color: #FFFFFF;text-align: center;height: 200px;">
      测试弹窗内容
      <button type="primary" :disabled="innerBtnDis">测按钮</button>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  btnDis: Boolean
})

const innerBtnDis = ref(props.btnDis)
watch(() => props.btnDis, (val) => {
  innerBtnDis.value = val
})
</script>
  1. 或者使用v-if控制弹窗的显示隐藏，而不是依赖uni-popup的内部机制：
<!-- 父组件修改 -->
const popOpen = () => {
  popRef.value.openCommPop()
  // 改为在打开后再修改值
  setTimeout(() => {
    btnDis.value = false
  }, 2000)
}
回到顶部