访问由 svelte 中的不同组件更新的组件中的变量
access variable in a component updated by a different component in svelte
这是我从中获取用户输入并将其保存在变量中的组件。
我希望这个值在点击提交按钮后立即在其他组件中更新。
<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中更新它。
我该怎么做?
有两种方法可以做到这一点。
如果两个组件都是同一个 parent 的 children,您可以在 parent 中定义变量,然后从表单组件向上传播它(通过使用bind:
语法或 createEventDispatcher
然后将其传递回另一个组件。
另一种方法是在另一个文件中声明一个可写存储,在两个文件中导入这个。更新一个文件中的商店将自动更新它在其他地方的价值。
(几乎但不是真的)第三种选择是让 parent 声明商店并使用 setContext
将其传递到上下文中,然后您可以在所有后代(不仅是选项 1 中的 children)。这具有商店的所有优点,但额外的元素是它不会在整个应用程序中共享,而只会在应用程序的一部分中共享。
您可以使用上下文 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>
这是我从中获取用户输入并将其保存在变量中的组件。 我希望这个值在点击提交按钮后立即在其他组件中更新。
<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中更新它。
我该怎么做?
有两种方法可以做到这一点。
如果两个组件都是同一个 parent 的 children,您可以在 parent 中定义变量,然后从表单组件向上传播它(通过使用bind:
语法或 createEventDispatcher
然后将其传递回另一个组件。
另一种方法是在另一个文件中声明一个可写存储,在两个文件中导入这个。更新一个文件中的商店将自动更新它在其他地方的价值。
(几乎但不是真的)第三种选择是让 parent 声明商店并使用 setContext
将其传递到上下文中,然后您可以在所有后代(不仅是选项 1 中的 children)。这具有商店的所有优点,但额外的元素是它不会在整个应用程序中共享,而只会在应用程序的一部分中共享。
您可以使用上下文 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>