是什么导致此Svelte App中出现“未定义filterUsers”错误？

问题描述

出于学习目的，我正在开发一个小型的svelte应用程序（对svelte来说是新手）。

应用程序在Bootstrap 4表中显示randomuser.me API中用户的JSON。

我目前正在将应用程序分解为组件。

在App.svelte中，我有：

<script>
    const apiURL = "https://randomuser.me/api/";
    import { onMount } from "svelte";
    import { fade,fly } from 'svelte/transition';
    import { flip } from 'svelte/animate';
    import Search from './Search.svelte';
    let users = [];
    $:filteredUsers = users;
    
     onMount(() => {
        getUsers();
        filterUsers();
    });
    
    const getUsers = () => {
        let getFrom = "&results=20&inc=name,location,email,cell,picture";
        fetch(`${apiURL}?${getFrom}`)
            .then(res => res.json())
            .then((data) => users = data.results);
    };
    
    const deleteUser = (user) => {
        let itemIdx = filteredUsers.findindex(x => x == user);
        filteredUsers.splice(itemIdx,1);
        filteredUsers = filteredUsers;
    }
</script>

搜索功能已移至其自己的组件：

<script>
    export let stringToMatch = '';
    export let filteredUsers = [];
    
        export const filterUsers = () => {
        filteredUsers = users;
    
        if(stringToMatch){
            filteredUsers = users.filter(user => {
                return user.name.first.toLowerCase().includes(stringToMatch.toLowerCase())
                    || user.name.last.toLowerCase().includes(stringToMatch.toLowerCase())
                    || user.location.city.toLowerCase().includes(stringToMatch.toLowerCase());
            });
        }
    }
</script>

<div class="search p-2">
   <input class="form-control" type="text" placeholder="Search..." bind:value="{stringToMatch}" on:input="{filterUsers}">
</div>

即使我已从Search.svelte导出变量并将te search组件导入到App.svelte组件中，我仍然遇到filterUsers is not defined错误，如 { {3}} 。

为什么会这样？什么是最快的修复程序？

解决方法

搜索组件应负责发出搜索项，或者您可以编写一个过滤后的函数并将其传递给搜索，但是您要在父级中调用子函数。据我所知export确实很灵活。这意味着Child个组件期望一个prop实际上没有导出变量。您可以在https://svelte.dev/docs#1_export_creates_a_component_prop上了解有关组件通信的更多信息。

我对您的REPL进行了一些更改。您可以在这里找到它。

https://svelte.dev/repl/9da70df5e25646aabc5c37355b82c4a3?version=3.28.0

svelte svelte-component