A parent element is a component that contains another component in the hierarchy. It makes complex views practical by composing smaller components instead of rendering an entire application from one component. section 11.0
A parent component coordinates its children through several responsibilities:
- Pass data downward as props, giving each child the information it needs to render. section 11.0 section 11.3
- Register handlers for events emitted upward by children, allowing child activity to affect parent state. section 11.2
- Provide the parent instance as the event handler’s this value, so handlers can update the parent’s state. section 11.2.1
- Tell a child to re-render when its props change while the component tree is updated. section 11.3
A parent handles a child event
const ParentComponent = defineComponent({ state() { return { counter: 0 } }, render() { const { counter } = this.state return hFragment([ h('p', {}, [`The count is: ${counter}`]), h(MyFancyButton, { on: { btnClicked: () => { this.updateState({ counter: counter + 1 }) } } }, ['Increment']) ]) } }) The parent supplies the handler; the child emits btnClicked; the handler updates the parent’s counter. section 11.2.1
Figure 11.1 Props flow down; events flow up.
Use the diagram to trace the two-way communication pattern: props flow from parent to child, while events flow from child to parent. section 11.0
