（8）svelte 教程： Event Forwarding

什么是 Event Forwarding

Event Forwarding 是 Svelte 框架中的一个概念，指的是将一个组件的事件（如点击、鼠标悬停等）转发给其父组件。这样，父组件可以监听和处理子组件中的事件。通过这种方式，可以减少代码的重复和复杂度，同时提高组件的可复用性和模块化程度。

逐行解释代码

App.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 之间切换（即点击一次切换显示状态）。

<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

<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’。这个变量用来显示传入的消息内容。

{#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 的注释，忽略关于 a11y-click-events-have-key-events 的可访问性警告。
<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 完整代码


<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 完整代码

<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>