Introduction

What are Components?

Components are the building blocks of Yew. They manage their own state and can render themselves to the DOM. Components are created by implementing the Component trait for a type.

Writing Component’s markup

Yew uses Virtual DOM to render elements to the DOM. The Virtual DOM tree can be constructed by using the html! macro. html! uses syntax which is similar to HTML but is not exactly the same. The rules are also much stricter. It also provides super-powers like conditional rendering and rendering of lists using iterators.

Struct Components - 图1info

Learn more about the html! macro, how it’s used and its syntax

Passing data to a component

Yew components use props to communicate between parent and children. A parent component may pass any data as props to its children. Props are similar to HTML attributes but any Rust type can be passed as props.

Struct Components - 图2info

Learn more about the props

Struct Components - 图3info

For other than parent/child communication, use contexts