<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> |
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; | |
} | |
} |
<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> |
<?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