Svelte如何在组件外部监听开启accessors配置的组件属性变化

问题原因 #

你当前写法失效的核心原因是：Svelte的响应式更新由赋值操作触发，父组件中两个$:响应式声明的依赖只有page变量（即组件实例的引用）。子组件内部修改title属性时，page本身的引用没有发生变化，因此父组件的响应式逻辑不会被触发，仅在组件挂载、page第一次被赋值时执行一次。

纯普通Prop的实现方案（无需Store） #

方案1：直接双向绑定Prop（最推荐） #

这是Svelte原生支持的最简洁写法，直接通过绑定语法同步父子组件的属性值，完全符合Svelte的设计规范：
父组件修改为以下代码即可：

<script>
    import SettingsPage from './Settings.svelte';
    
    let title = '';
    $: title2 = title; // 按需派生其他变量即可
</script>

<h3>title: {title}</h3>
<h3>title2: {title2}</h3>

<div class="Page">
  <!-- 直接双向绑定子组件的title属性 -->
  <svelte:component this={SettingsPage} bind:title={title} />
</div>

子组件无需任何修改，2秒后父组件的两个标题都会自动更新为最新值。

方案2：子组件抛事件、父组件监听（适合不需要双向绑定的场景） #

如果你不希望使用双向绑定，也可以通过组件事件实现属性变化的监听：

1. 子组件新增属性变化的事件派发：

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();

  export let title = 'Settings';

  // title变化时自动抛事件
  $: dispatch('title-update', title);

  setTimeout(() => {
    title = 'Settings - Test';
  }, 2000);
</script>

<svelte:options accessors={true}/>

2. 父组件监听对应事件更新本地变量即可：

<script>
    import SettingsPage from './Settings.svelte';
    
    let title = '';
    $: title2 = title;
</script>

<h3>title: {title}</h3>
<h3>title2: {title2}</h3>

<div class="Page">
  <svelte:component 
    this={SettingsPage} 
    on:title-update={(e) => title = e.detail} 
  />
</div>

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