我会尽量简短。 我正在使用主要组件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>
答案 0 :(得分:1)
您可以通过添加App.svelte bind:state={course.state}
使用双向数据绑定。现在,如果更改Course.svelte中的值,App.svelte中的值将被更新。
以下是REPL:
https://svelte.dev/repl/48649794a7144d63bbde67a2db2f67a9?version=3.24.1
有更好的方法来解决此问题,并且在使用双向绑定时应格外小心。使用双向绑定,您将很容易弄乱数据流。
更好的数据流处理方式:
store
createEventDispatcher