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 中，您可以使用 <SettingsPage bind:title={title} /> 轻松地 bind 组件的道具，例如 title 用于 SettingsPage 组件。通过更新组件中的 title 属性，它也会更新其父项的值。

看看REPL。

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

Svelte - watch changes to component property outside the component (accessors)

javascript

svelte-3

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

Svelte - watch changes to component property outside the component (accessors)

javascript

svelte

svelte-3

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