Create and Dispatch Events — Basics

DEX475 - Communicate with Events

📄 第 261 页 🎬 视频课程

课程章节介绍

同学们,咱们今天要讲Lightning Web Components里的事件创建和命名。想象一下,子组件想告诉父组件“嘿,我这里有事情发生”,就需要派发一个事件。创建事件有个固定的模式:用`CustomEvent`构造函数,给它一个字符串类型的事件名,然后调用`dispatchEvent()`把这个事件派发出去。 命名这里有三个规则,一定要注意:第一,不用小写字母,这是DOM的约定,事件名是区分大小写的,我们通常用驼峰式,比如`previous`;第二,别在里面加空格;第三,单词之间用下划线分隔,比如可以用`page_change`这种。特别强调一下,千万不要在事件名前面加“on”前缀。为什么?因为如果你的事件名叫`onmessage`,父组件监听时,模板里属性会变成`ononmessage`,两个“on”叠在一起,就乱套了,容易让人头疼。 接下来我们看个最简单的例子——分页器组件。它是一个可重用的子组件,里面有“上一页”和“下一页”两个按钮。点击“上一页”,子组件就派发一个叫`previous`的事件;点击“下一页”,派发`next`事件。父组件呢,在模板里用`onprevious`和`onnext`属性来监听,注意这里“on”是小写,后面接事件名的首字母大写。父组件的处理函数收到事件后,就把页码计数器加减。这些事件非常简单,就是纯粹的通知,不携带任何数据,只是告诉父组件“俺被点了”。明白了没?这种模式在开发里面特别常用,大家要记牢。

关键词

LWC Lightning Web Components Salesforce