Svelte - 监视组件外部组件属性的更改（访问器）

Question

是否可以在组件外部监视组件属性的更改？

我尝试过使用该$: 声明，但它似乎不起作用（除了第一次 - 检测组件何时安装）。

即这是属性从内部改变的组件

<script>
  export let title = 'Settings';

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

//
</script>

<svelte:options accessors={true}/>

以及包含它的组件：

<script>
    import SettingsPage from './Settings.svelte';
    
    let page;   
    let title = '';
    
    $: {
        if (typeof page !== 'undefined') {
            title = page.title;
        }
    }
    
    $: title2 = typeof page !== 'undefined' ? page.title : '';
        
</script>

After 2 seconds, the titles should change to "Settings - test" (it does not work).

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

<div class="Page">
  <svelte:component this={SettingsPage} bind:this={page} />
</div>

游乐场：https://svelte.dev/repl/91ef762b9f414223835fc1f08f20bd5d ?version=3.42.2

不幸的是，反应式声明不会在此实例上触发。有没有办法让这项工作纯粹使用常规属性？（我知道有一些解决方法，例如使用商店作为属性 - 但如果可能的话，我想将其作为常规道具）。

Answer 1

在 svelte 中，您可以使用轻松绑定组件的 prop，就像title组件一样。通过更新组件中的 prop，它也会更新其父组件的值。SettingsPage<SettingsPage bind:title={title} />title

看看REPL。