This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<style> | |
table tr td{ | |
padding: 10px; | |
border: 1px solid black; | |
} | |
</style> | |
<table style="background:white;"> | |
<tr> | |
<td> | |
Reactive Public Property | |
<lightning-input type="text" onchange={handleChange1}></lightning-input> | |
<br/> | |
<b>Value: {reactivePublicProperty}</b> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
Reactive Private Property | |
<lightning-input type="text" onchange={handleChange2}></lightning-input> | |
<br/> | |
<b>Value: {reactivePrivateProperty}</b> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
Non-Reactive Private Property | |
<lightning-input type="text" onchange={handleChange3}></lightning-input> | |
<br/> | |
<b>Value: {nonReactivePrivateProperty}</b> | |
</td> | |
</tr> | |
</table> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { LightningElement,api, track } from 'lwc'; | |
export default class Child extends LightningElement { | |
@api reactivePublicProperty; | |
@track reactivePrivateProperty; | |
nonReactivePrivateProperty; | |
handleChange1(event) { | |
this.reactivePublicProperty = event.target.value; | |
} | |
handleChange2(event) { | |
this.reactivePrivateProperty = event.target.value; | |
} | |
handleChange3(event) { | |
this.nonReactivePrivateProperty = event.target.value; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<style> | |
table tr td{ | |
padding: 10px; | |
border: 1px solid black; | |
} | |
</style> | |
<table style="background: #e6efe2;"> | |
<tr> | |
<td> | |
<b>Passing value to reactive public property</b> | |
<c-child reactive-public-property="Hi from parent - 1"></c-child> | |
</td> | |
<td> | |
<b>Passing value to reactive private property</b> | |
<c-child reactive-private-property="Hi from parent - 2"></c-child> | |
</td> | |
<td> | |
<b>Passing value to non-reactive private property</b> | |
<c-child non-reactive-private-property="Hi from parent - 3"></c-child> | |
</td> | |
</tr> | |
</table> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="UTF-8"?> | |
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="parent"> | |
<apiVersion>45.0</apiVersion> | |
<isExposed>true</isExposed> | |
<targets> | |
<target>lightning__AppPage</target> | |
<target>lightning__RecordPage</target> | |
<target>lightning__HomePage</target> | |
</targets> | |
</LightningComponentBundle> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment