Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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
You can’t perform that action at this time.