Monday, January 13, 2020

How to pass data from parent component to child component in lightning web component

In this blog post, we will learn "How to pass data from parent component to child component in lightning web component".


childcompdemo.html



<template>
    <div>
        <p>
        Hi, I am from child component HTML file.
       </p>
        <p>
        <b>Message from parent comp is </b> : {messagefromparent}
       </p>
       <p>
        <b>Name of parent comp is </b>: {parentcompname}
       </p>
    </div>
</template>      


childcompdemo.js



import { LightningElement, api } from 'lwc';

export default class Childcompdemo extends LightningElement {

    @api messagefromparent;
    @api parentcompname;

}


parentcompdemo.html



<template>
    <div>
        Hi, I am from parent component HTML file.
        <c-childcompdemo messagefromparent="Hi this message is from parent comp" parentcompname="parentcompdemo" ></c-childcompdemo>
    </div>
</template>



parentcompdemo.js



//* eslint-disable no-alert */
import { LightningElement } from 'lwc';

export default class Parentcompdemo extends LightningElement {

}


lightningapp.app



<aura:application extends="force:slds">
<c:parentcompdemo></c:parentcompdemo>
</aura:application>       


How to pass data from parent component to child component in lightning web component

1 comment: