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

相关推荐
極光未晚18 分钟前
乾坤微前端项目:前端处理后台分批次返回的 Markdown 流式数据
前端·vue.js·面试
用户66006766853919 分钟前
用 CSS3 导演一场星际穿越:复刻“星球大战”经典片头
前端·css
程序员鱼皮19 分钟前
前后端分离,千万别再搞错了!
java·前端·后端·计算机·程序员·编程·软件开发
前端赵哈哈20 分钟前
Vite 构建后产品详情页图片失效?从路径匹配到映射表的完美解决
前端·vue.js·vite
葡萄城技术团队21 分钟前
React Native 错误处理完全指南
前端
地方地方23 分钟前
event loop 事件循环
前端·javascript·面试
AAA阿giao23 分钟前
不用 JavaScript,你能用 CSS 做到什么?答案:拍一部星战电影!
前端·css
golang学习记32 分钟前
从0死磕全栈之在 Next.js 中使用 Sass
前端
好大的月亮37 分钟前
oss中的文件替换后chrome依旧下载到缓存文件概述
前端·chrome·缓存
Broken Arrows44 分钟前
解决Jenkins在构建前端任务时报错error minimatch@10.0.3:……的记录
运维·前端·jenkins