引用在苗条组件内定义的商店？答案

【问题标题】：Referring stores defined inside svelte components?引用在苗条组件内定义的商店？
【发布时间】：2021-06-04 21:57:35
【问题描述】：

我对如何引用组件内部定义的存储感到困惑；我不能使用定义为属性的商店。假设我有以下内容：

(component.svelte)

<script lang="ts">
  import { writable } from 'svelte/store';
  export const prop = writable(false);
</script>

（App.svelte）

<script lang="ts">
  import Component from './component.svelte'
  let component: Component;
</script>

<div>
  <Component bind:this={component}  />
  <!-- line below won't work -->
  {component.$prop}
</div>

...如何引用component.prop？两种语法 component.$prop 或 $component.prop 都不起作用。我是否需要从单独的第三个文件导入商店以便将它们称为简单变量（即 $prop）？

【问题讨论】：

标签： javascript reference components store svelte

【解决方案1】：

目前这是不可能的。但是，您可以做的只是在 App.svelte 中绑定 store 道具

<script>
  let prop
</script>

<Component bind:prop={prop} />
{$prop}

（请注意，如果您在这里有一个循环，也可以绑定到数组bind:prop={props[i]）

另一种方法是从组件变量中解构您的商店

<script>
  let component
  $: prop = component && component.prop
</script>

<Component bind:this={component} />
{$prop}

【讨论】：