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 的第二个组件。

<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 并在传单地图中更新它。

我该怎么做？

Answer 1

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

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

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

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

Answer 2

您可以使用 Context API + Writable Store

<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 中的不同组件更新的组件中的变量

2 个答案: