owl/doc/component.md

Component

Components are the reusable, composable widgets. They are designed to be low level, to be declarative, and with asynchronous rendering.

For example:

export class Counter extends Component {
  inlineTemplate = `
    <div t-name="counter">
      <button t-on-click="increment(-1)">-</button>
      <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
      <button t-on-click="increment(1)">+</button>
    </div>`;

  state = {
    counter: 0
  };

  constructor(parent, props) {
    super(parent, props);
    this.state.counter = props.initialState || 0;
  }

  increment(delta) {
    this.updateState({ counter: this.state.counter + delta });
  }
}