Блог

Можно ли отслеживать изменения в свойстве компонента за пределами компонента?

Я пробовал использовать $: объявление, но оно, похоже, не работает (за исключением первого раза — обнаружения, когда компонент монтируется).

Т. е. это компонент, свойство которого изменяется изнутри

 <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

К сожалению, в этом случае реактивная декларация не срабатывает. Есть ли способ заставить это работать исключительно с обычными свойствами? (Я знаю, что есть обходные пути, такие как использование магазина в качестве собственности, но я бы хотел, чтобы он был обычным, если это возможно).

В svelte вы можете легко привязать опору компонента, как title для SettingsPage компонента, с помощью <SettingsPage bind:title={title} /> . Обновляя title реквизит в компоненте, он также обновит значение его родительского элемента.

Взгляните на РЕПЛ.