Svelte - 观察组件外部的组件属性变化（访问器）答案

【问题标题】：Svelte - watch changes to component property outside the component (accessors)Svelte - 观察组件外部的组件属性变化（访问器）
【发布时间】：2021-10-22 19:05:45
【问题描述】：

是否可以在组件外部观察组件属性的变化？

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

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

<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

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

【问题讨论】：

有没有理由不像<SettingsPage bind:title={title} /> 那样绑定title 属性。这是一个适用于这种结构的示例svelte.dev/repl/605d1fd526f042b584150c9477343f9a?version=3.42.2。
是的，这是一个解决方案。谢谢。
我可以把它作为答案吗？
好的，请继续。

标签： javascript svelte svelte-3

【解决方案1】：

在 svelte 中，您可以使用 <SettingsPage bind:title={title} /> 轻松地 bind 组件的 props，例如 title 用于 SettingsPage 组件。通过更新组件中的title 属性，它也会更新其父组件的值。

看看REPL。

【讨论】：