我有两个组件在组件树中距离很远,我对如何在两者之间进行通信存有疑问。我有搜索组件、listItems 和商店。
商店.svelte
<script context="module" lang="ts">
import type {Items} from '../../Models/Items.model';
import { writable } from 'svelte/store';
export const dataItems = writable<Items[]>([]);
const filterInfo = (term:string) => {
dataItems.update(item => {
item.filter(x => {
return x.name.toLowerCase().includes(term.toLowerCase())
|| x.description.toLowerCase().includes(term.toLowerCase());
})
return dataItems;
})
}*/
export const dispatcher = {filterInfo};
</script>
Run Code Online (Sandbox Code Playgroud)
搜索组件
<script lang="ts">
import { dispatcher } from './ViewI/store.svelte';
let value:any;
const handleChange = () => {
dispatcher.filterInfo(value)
console.log(value)
}
</script>
<Search>
<input bind:value
on:input={handleChange}>
</Search>
Run Code Online (Sandbox Code Playgroud)
列表项组件
import type {Items} from …
Run Code Online (Sandbox Code Playgroud)