（8）svelte 教程： Event Forwarding

（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 的变量，初始值为