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.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.