Possibly save 1 hour of your time: Here are some resources that I have used to learn Stencil.js.
- Props are custom attribute/properties exposed publicly on the element.
- string, number, boolean, object, array
- Children components should not know about or reference parent components, so Props should be used to pass data down from the parent to the child.
- By default, when a member decorated with a
@Prop()decorator is set, the component will efficiently re-render.
- It’s important to know, that
@Propis immutable from inside the component logic. Once a value is set by a user, the component cannot update it internally.
- Within the component class, the Props are accessed via the this operator.
- Externally, Props are set on the element.
- @PropWillChange and @PropDidChange
- can be used to manage internal data for a component. This means that a user cannot modify the property from outside the component, but the component can modify it how ever it sees fit.
- Any changes to a
@State()property will cause the components render function to be called again.
- used to expose methods on the public API.
- Functions decorated with the @Method() decorator can be called directly from the element.
Understanding Component, Prop, State, Event, EventEmitter, Listen:
Lots of resources here: