Svelte子组件导出变量响应式问题：点击按钮不更新的原因及解决

为什么点击按钮后文本不更新？ #

有两个核心错误导致了这个问题：

1. 点击事件绑定错误：on:click={click()}会在组件初始化渲染时立即执行click函数，而不是在按钮被点击时触发。正确的写法是绑定函数引用（不带括号）。
2. 错误修改组件类属性：你直接修改Nested.answer，但Nested是组件的类而非实例，而且Svelte的响应式更新依赖父组件维护响应式状态，再通过props传递给子组件。直接修改类属性不会触发任何响应式更新逻辑。

实现父组件响应式修改子组件值的正确写法 #

需要在父组件中声明一个响应式变量，将其作为props传递给子组件，点击按钮时更新这个变量，Svelte会自动同步更新子组件的内容。

App.svelte

<script>
  import Nested from './Nested.svelte';
  // 声明响应式变量，作为子组件的props数据源
  let answer = 42;
  function click() {
    answer += 1;
  }
</script>

<!-- 将响应式变量传递给子组件 -->
<Nested answer={answer}/>

<!-- 绑定点击事件，传递函数引用 -->
<button on:click={click}>hi</button>

Nested.svelte

<script>
  export let answer;
</script>

<p>The answer is {answer}</p>

补充说明 #

• Svelte的响应式基于变量赋值触发，当父组件的answer变量被重新赋值时，所有依赖该变量的地方（包括子组件的props）都会自动更新。
• 子组件通过export let声明props接收父组件的值，当父组件的源变量更新时，子组件的props会自动同步，无需额外手动处理。

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