Primevue Dialog组件中子组件无法读取Props的问题求助

问题原因分析 #

你代码里的Dialog组件使用了:hide="selectedUser = null"的绑定，这是赋值操作而非判断逻辑，会在Dialog隐藏时直接把selectedUser设为null。结合Primevue Dialog的渲染机制（默认通过Teleport挂载到body下的独立节点），这个错误的绑定会导致selectedUser在Dialog显示前就被提前置空，子组件自然无法获取到有效值。

解决方案 #

1. 修正hide的绑定逻辑 #

把赋值操作改为事件监听，仅在Dialog触发隐藏事件时重置selectedUser：

<Dialog 
  v-model:visible="showUserModal" 
  modal
  :header="modalUserTitle" 
  :style="{ width: '50vw' }"
  :draggable="false"
  @hide="selectedUser = null" <!-- 替换为事件监听，而非属性绑定 -->
>    
  <TabView>
    <TabPanel :header="$translate('user')">
      <TestComponent :user="selectedUser" />
    </TabPanel>
  </TabView>  
</Dialog>

:hide属性原本是用来控制Dialog是否隐藏的布尔值，你之前的写法会直接修改selectedUser的取值，导致Dialog显示时该值已为空。改成@hide事件监听后，只有当Dialog真正触发隐藏动作时才重置值，保证显示时selectedUser处于有效状态。

2. 子组件添加Props校验（辅助排查） #

在TestComponent中添加Props类型校验，方便快速定位传递异常：

<script setup>
const props = defineProps({
  user: {
    type: Object,
    required: true,
    default: () => null
  }
})
</script>

如果user未正确传递，Vue会在控制台抛出警告，帮助你快速排查问题。

3. 确认Teleport配置（可选） #

若修改后仍有问题，可检查Dialog的teleport属性，确保组件上下文与父组件同步：

<Dialog 
  v-model:visible="showUserModal" 
  teleport="body" <!-- 默认挂载到body，也可指定父组件内的节点 -->
  <!-- 其他属性 -->
>
  <!-- 内容 -->
</Dialog>

不过多数情况下，修正hide的绑定逻辑即可解决问题。

总结 #

核心问题是错误地将赋值表达式绑定到hide属性，导致selectedUser被提前置空。改为@hide事件监听后，就能保证Dialog显示时selectedUser有效，子组件可正常获取Props值。

内容的提问来源于stack exchange，提问作者Pardon_me