Lightning Web Component: Event (Parent to Chlid / Child to Partner)

Events- Parent To Child Navigation

Sometimes it is needed to merge the two or more components and after merging we also need a data flow between the components.

To pass data from top-bottom (Parent to child) in the component list, the child or lower component must declare a public API, with this public API parent can pass the data to child

Public properties

Public properties are properties denoted by the @api decorator. It is also known as Public reactive property.

Note: It is crucial that You can assign a default value to public property, but you should never change the value of public property in the component.

Events- Child To Parent Navigation

Data must be passed up using Events. Events are the activity or the action that fires from the child component and listens to the parent.

LWC creates the Events using the Event or CustomEvent standard JavaScript classes. The CustomEvent class will allow you to store information in its detail property and then transmit those details(information) to the listeners of the event. Then, you can make an event target dispatch to invoking the dispatchEvent standard method.

Event propagation

Event propagation means launching a series of events in the web browser. This can be the top to bottom and bottom to top. Event propagation defines how to travel in the DOM tree.

There are two types of propagation that manage the Lightning component event handling.

  • Bubble: Bubble event allow the event to fire upward direction
  • Composed: composed determines whether the event should ignore the shadow DOM or not.
  • Syntax:
    this.dispatchEvent(new CustomEvent('clickevevent', { bubbles: false , composed : false }));

Practical operation

LWC: Parent Component

HTML

html 复制代码
<template>


    <div if:true={isMainPage}>
        <p>This is parent page.</p>
        <button class="slds-button slds-button_outline-brand" onclick={handleClick}>Go to Child Page</button>
    </div>
    <div if:true={isChildPage}>
        <c-child-Component onchildclick={handleChildEvent} message={message} ></c-child-Component>
    </div>


 </template>

JS

js 复制代码
import { LightningElement,api,track } from 'lwc';

export default class ParentComponent extends LightningElement {
    @track isMainPage = true;
    @track isChildPage = false;
    @api message;
    constructor(){
        super();
        this.template.addEventListener('childclick', this.handleClick.bind(this));
    }

    handleClick(event){
        this.message = 'Parent send data to child.';
        this.isMainPage = false;
        this.isChildPage = true;
    }

    handleChildEvent(event){
        this.isMainPage = event.detail.isMainPage;
        this.isChildPage = event.detail.isChildPage;
    }

}

LWC: Child Component

HTML

html 复制代码
<template>
    <div>
        <p>This is child page.</p>
        Message: {message}
        <button class="slds-button slds-button_outline-brand" onclick={clickbutton}>Go to Parent Page</button>
    </div>
 </template>

JS

js 复制代码
import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {

    @api message;

    clickbutton(){
        const event = new CustomEvent('childclick', {
            detail: {isMainPage:true,isChildPage:false}
            });
        this.dispatchEvent(event);
    }
}

Picture

相关推荐
SUPER52662 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx182 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友5 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar5 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界7 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙8 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump8 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD8 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro8 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin9 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial