(8)svelte 教程: Event Forwarding
什么是 Event Forwarding
Event Forwarding 是 Svelte 框架中的一个概念,指的是将一个组件的事件(如点击、鼠标悬停等)转发给其父组件。这样,父组件可以监听和处理子组件中的事件。通过这种方式,可以减少代码的重复和复杂度,同时提高组件的可复用性和模块化程度。
逐行解释代码
App.svelte
svelte
<script>
import Modal from './Modal.svelte';
let showModal = false;
let toggleModal = () => {
showModal = !showModal;
};
</script>
-
import Modal from './Modal.svelte';
- 从当前目录中导入名为
Modal
的 Svelte 组件。
- 从当前目录中导入名为
-
let showModal = false;
- 声明一个名为
showModal
的变量,初始值为false
。这个变量用来控制Modal
组件的显示与隐藏。
- 声明一个名为
-
let toggleModal = () => { showModal = !showModal; };
- 声明一个名为
toggleModal
的箭头函数。该函数的作用是将showModal
的值在true
和false
之间切换(即点击一次切换显示状态)。
- 声明一个名为
svelte
<Modal message='Hello, Ninjas!' {showModal} on:click={toggleModal} />
<main>
<button on:click={toggleModal}>Open Modal</button>
</main>
-
<Modal message='Hello, Ninjas!' {showModal} on:click={toggleModal} />
- 使用
Modal
组件,并传递三个属性:message='Hello, Ninjas!'
:向Modal
组件传递一个名为message
的字符串属性,值为 'Hello, Ninjas!'。{showModal}
:传递showModal
变量的当前值给Modal
组件,使其能根据该值决定是否显示。on:click={toggleModal}
:监听Modal
组件的click
事件,当该事件触发时,调用toggleModal
函数。
- 使用
-
<main>
和<button on:click={toggleModal}>Open Modal</button>
- 创建一个
main
元素,并在其内部创建一个按钮。 on:click={toggleModal}
:为按钮绑定click
事件,当按钮被点击时,调用toggleModal
函数,切换showModal
的值,从而控制Modal
的显示与隐藏。
- 创建一个
Modal.svelte
svelte
<script>
export let showModal = false;
export let isPromo = false;
export let message = 'default message';
</script>
-
export let showModal = false;
- 声明并导出一个名为
showModal
的变量,初始值为false
。这个变量由外部(父组件)传入,用来控制Modal
组件的显示与隐藏。
- 声明并导出一个名为
-
export let isPromo = false;
- 声明并导出一个名为
isPromo
的变量,初始值为false
。这个变量用来控制Modal
组件是否具有promo
样式。
- 声明并导出一个名为
-
export let message = 'default message';
- 声明并导出一个名为
message
的变量,初始值为 'default message'。这个变量用来显示传入的消息内容。
- 声明并导出一个名为
svelte
{#if showModal}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="backdrop" class:promo={isPromo} on:click>
<div class="modal">
<p>{message}</p>
</div>
</div>
{/if}
-
{#if showModal}
- Svelte 的条件渲染语句,如果
showModal
为true
,则渲染内部的内容。
- Svelte 的条件渲染语句,如果
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
- Svelte 的注释,忽略关于
a11y-click-events-have-key-events
的可访问性警告。
- Svelte 的注释,忽略关于
-
<div class="backdrop" class:promo={isPromo} on:click>
- 创建一个
div
元素,类名为backdrop
,并根据isPromo
的值动态添加promo
类。 on:click
:为div
绑定click
事件。
- 创建一个
-
<div class="modal">
- 创建一个类名为
modal
的div
元素,用于显示模态框的内容。
- 创建一个类名为
-
<p>{message}</p>
- 创建一个
p
元素,内容为message
变量的值。
- 创建一个
以上代码实现了一个简单的模态框组件,通过事件转发机制,父组件可以控制子组件的显示与隐藏,并处理子组件的点击事件。
App.svelte 完整代码
javascript
<script>
import Modal from './Modal.svelte';
let showModal = false;
let toggleModal = () => {
showModal = !showModal;
};
</script>
<Modal message='Hello, Ninjas!' {showModal} on:click={toggleModal} />
<main>
<button on:click={toggleModal}>Open Modal</button>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
Modal.svelte 完整代码
javascript
<script>
export let showModal = false;
export let isPromo = false;
export let message = 'default message';
</script>
{#if showModal}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="backdrop" class:promo={isPromo} on:click>
<div class="modal">
<p>{message}</p>
</div>
</div>
{/if}
<style>
.backdrop{
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.8);
}
.modal{
padding: 10px;
border-radius: 10px;
max-width: 400px;
margin: 10% auto;;
text-align: center;
background: white;
}
.promo .modal{
background: crimson;
color: white;
}
</style>