如何获取Svelte组件flowbite-svelte Popover的open属性值？

问题根源 #

你的代码存在两个核心问题：一是触发按钮未与Popover组件关联，导致组件内部状态未正确切换；二是状态访问时机不对，组件事件触发时内部状态可能还未完成更新。

修复方案 #

以下是可直接运行的修正代码，附带关键说明：

<script>
import { onMount } from 'svelte'
import { Popover } from 'flowbite-svelte'

let popover
let isOpen = false // 初始化默认状态

// 最可靠的方式：用Svelte反应式声明监听状态变化
$: {
  console.log('当前Popover状态:', isOpen)
}

onMount(() => {
  popover.$on('show', () => {
    // 用微任务确保组件内部状态已更新
    setTimeout(() => {
      console.log('组件实例open值:', popover.open)
      console.log('绑定变量isOpen值:', isOpen)
    }, 0)
  })
})
</script>

<!-- 触发按钮必须放入Popover的trigger插槽，让组件能关联点击事件 -->
<Popover
  bind:open={isOpen}
  bind:this={popover}
  trigger="click">
  <button slot="trigger">Click</button>
  Some content
</Popover>

关键细节说明 #

• 关联触发按钮：必须将按钮放入Popover的trigger插槽中，否则组件无法监听点击事件，自然不会更新open状态。
• 初始化状态变量：给isOpen设置初始值false，避免初始状态为undefined。
• 反应式监听优先：使用Svelte的$:反应式声明是监听状态变化最可靠的方式，它会在isOpen值改变时自动执行，无需依赖组件事件。
• 事件回调的状态时机：如果一定要用组件的show/hide事件，需要用setTimeout延迟获取值——因为事件触发时组件内部的open状态可能还没完成更新，微任务能确保拿到最新值。

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