Svelte中Button组件loading设为false时加载spinner仍显示如何解决

• 你的Button组件内部没有将loading显式声明为对外暴露的响应式属性，大概率是直接通过$$props或者$$restProps读取父组件传入的loading值来控制spinner展示
• Svelte 3中$$props和$$restProps不具备响应式特性，只有显式用export声明的组件属性才能支持父到子的响应式同步：父组件第一次传loading=true时子组件能读到初始值，所以刚点击时spinner正常展示，但后续父组件把loading修改为false时，子组件读取的$$props.loading不会自动更新，就会出现spinner一直不消失的问题。

1. 在Button组件内部显式声明导出loading属性，代码示例：

<script>
// 必须加export关键字，才能让父组件传入的loading值同步响应式更新
export let loading = false
// 其余组件逻辑省略
</script>

<button>
  {#if loading}
    <span class="loading-spinner"></span>
  {/if}
  <slot />
</button>

2. 父组件调用时正常绑定loading属性即可：

<script>
let isLoading = false
async function loadMore() {
  isLoading = true
  // 模拟请求
  await new Promise(resolve => setTimeout(resolve, 1000))
  isLoading = false
}
</script>

<Button loading={isLoading} on:click={loadMore}>加载更多</Button>

如果修复后问题仍存在，可以做两个排查：

• 在父组件模板中加入{$console.log(isLoading)}，确认异步逻辑执行结束后isLoading确实被修改为false
• 排查是否存在全局样式强制显示了spinner元素，和组件逻辑无关

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