访问由 svelte 中的不同组件更新的组件中的变量

Question

这是我从中获取用户输入并将其保存在变量中的组件。我希望这个值在点击提交按钮后立即在其他组件中更新。

<script>
  import { onMount } from "svelte";
    let url=[];
onMount(() => {
  onClickGetNotes()
});
    async function onClickGetNotes() {
            console.log(url.url)
  }
  </script>

<form on:submit|preventDefault={onClickGetNotes}>
    <input label="url" bind:value={url.url} placeholder="enter id here"/>
    <button>Submit</button>
</form>

这是第二个组件，我希望输入的 url 更新为传单的 imageoverlay。

<script>
  import { onMount } from "svelte";
import L from "leaflet";

 var url
 var map
 var layerGroup
// code for map

onMount(() => {
   map = L.map('issmap', {
  .....
  crs: L.CRS.Simple
});
var w = 500,
    h = 500,
    url = 'https://pp.vk.me/c837734/v837734326/d436/zlt_Wifq2NU.jpg';
 ......
layerGroup = L.layerGroup().addTo(map);
});
  </script>

.....

整个想法是为用户获取url并在leafletmap中更新它。

我该怎么做？

Answer 1

有两种方法可以做到这一点。

如果两个组件都是同一个 parent 的 children，您可以在 parent 中定义变量，然后从表单组件向上传播它（通过使用bind: 语法或 createEventDispatcher 然后将其传递回另一个组件。

另一种方法是在另一个文件中声明一个可写存储，在两个文件中导入这个。更新一个文件中的商店将自动更新它在其他地方的价值。

（几乎但不是真的）第三种选择是让 parent 声明商店并使用 setContext 将其传递到上下文中，然后您可以在所有后代（不仅是选项 1 中的 children）。这具有商店的所有优点，但额外的元素是它不会在整个应用程序中共享，而只会在应用程序的一部分中共享。

Answer 2

您可以使用上下文 API + 可写存储

<script>
  import { onMount, setContext } from "svelte";
  import {writable} from 'svelte/store'

  let url= writable("");
  
  setContext("c", url)
  onMount(() => {
   onClickGetNotes()
  });
    async function onClickGetNotes() {
            console.log($url)
  }
  </script>

<form on:submit|preventDefault={onClickGetNotes}>
    <input label="url" bind:value={$url} placeholder="enter id here"/>
    <button>Submit</button>
</form>

...

<script>
      import { onMount, getContext } from "svelte";
      import L from "leaflet";

      // to access the value use $url
      let url = getContext("c")
    
    </script>

访问由 svelte 中的不同组件更新的组件中的变量

access variable in a component updated by a different component in svelte

javascript

svelte

svelte-3