javascript - Svelte:如何将数据或道具从子组件传递给父组件?
问题描述
我会尽量简短。我有主要组件 app.svelte。在其中,我使用了一个名为 Course.svelte 的子组件。我正在使用 {#each} 块多次重复相同的组件。问题是我希望 app.svelte 在单个组件打开时知道:单击。现在我正在处理 Course.svelte 组件中的 on:click 事件。像这样,App.svelte 永远不会知道它。我应该怎么办?
Course.svelte 的片段以及我如何处理 on:click 事件:
<script>
function handleClick() {
if (state == courseStates.CLOSED) {
//Handle closed course
} else {
if (state === courseStates.READY) {
passCourse();
} else if (state === courseStates.PASS) {
failCourse();
}
}
}
function passCourse() {
state = courseStates.PASS;
}
function failCourse() {
state = courseStates.READY;
}
</script>
<div on:click={handleClick} class="text-center course btn {buttonClass}">
<h1>{name}</h1>
<h4>{code} - {credit} Credit Hours - Term {term}</h4>
</div>
App.svelte 的一个片段,我想通过单击课程来维护每门课程的状态,因为它随着时间的推移而变化:
<div class="row">
{#each courses as course}
{#if course.term == term}
<Course
state={course.state}
name={course.name}
credit={course.credit}
term={course.term}
code={course.code}
on:removecourse={removeCourse} />
{/if}
{/each}
</div>
解决方案
您可以通过添加 App.svelte 来使用双向数据绑定bind:state={course.state}
。现在,如果 Course.svelte 中的值发生更改,App.svelte 中的值将被更新。
这是一个 REPL:
https ://svelte.dev/repl/48649794a7144d63bbde67a2db2f67a9?version=3.24.1
有更好的方法来处理这个问题,你应该小心何时使用双向绑定。使用双向绑定,您将很容易弄乱您的数据流。
处理数据流的更好方法:
- 将函数从父级传递给子级
- 将整个数据对象传递给子组件
- 利用
store
- 使用自定义事件
createEventDispatcher
推荐阅读
- c# - Skiasharp 撤消/重做按钮
- javascript - 如何在具有长度限制和数量限制的数组中创建数字序列?
- c - 当代码无法释放内存时,它是否是 C 中的内存泄漏,但操作系统仍然会?
- android - Android 看不到 attr 样式
- python - 使用套接字将图像从 Pi 发送到计算机时面临延迟
- java - 访问二维数组的每个单元需要多少步骤?
- windows - Windows - FFmpeg - 如何将 jpg 文件映射到视频流 0:0 并仅包含音频流 0:2 而不是流 0:1 和 0:2 一起
- powershell - 如何使用 iTextSharp (iText v.5) 在 PowerShell 中拆分 PDF 文件
- java - Java 水平镜像文本(在 JFrame 中旋转和镜像文本)
- netlogo - 如何比较距离