(8)svelte 教程: Event Forwarding

(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 的值在 truefalse 之间切换(即点击一次切换显示状态)。
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 的条件渲染语句,如果 showModaltrue,则渲染内部的内容。
  • <!-- svelte-ignore a11y-click-events-have-key-events -->

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

    • 创建一个类名为 modaldiv 元素,用于显示模态框的内容。
  • <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>
相关推荐
冴羽2 天前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·svelte
冴羽4 天前
SvelteKit 最新中文文档教程(16)—— Service workers
前端·javascript·svelte
冴羽5 天前
SvelteKit 最新中文文档教程(15)—— 链接选项
前端·javascript·svelte
冴羽7 天前
SvelteKit 最新中文文档教程(14)—— 错误处理
前端·javascript·svelte
冴羽7 天前
SvelteKit 最新中文文档教程(13)—— Hooks
前端·javascript·svelte
冴羽yayujs7 天前
SvelteKit 最新中文文档教程(12)—— 高级路由
前端·javascript·vue.js·前端框架·react·svelte·sveltekit
冴羽8 天前
SvelteKit 最新中文文档教程(12)—— 高级路由
前端·javascript·svelte
冴羽9 天前
SvelteKit 最新中文文档教程(11)—— 部署 Netlify 和 Vercel
前端·javascript·svelte
冴羽10 天前
SvelteKit 最新中文文档教程(10)—— 部署 Cloudflare Pages 和 Cloudflare Workers
前端·javascript·svelte
冴羽11 天前
SvelteKit 最新中文文档教程(9)—— 部署静态站点与单页应用
前端·javascript·svelte