How to import a component in Yew?

在Yew框架中，导入组件主要涉及两个步骤：首先是在Rust代码中声明组件，然后在你的父组件或主组件中使用这个子组件。以下是一个详细的步骤以及示例：

步骤1: 创建组件

假设我们有一个简单的组件命名为MyComponent。我们会在一个Rust文件中定义它，比如叫做 my_component.rs。

rust
// src/components/my_component.rs

use yew::prelude::*;

pub struct MyComponent;

impl Component for MyComponent {
    type Message = ();
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        html! {
            <div>
                {"这是我的组件！"}
            </div>
        }
    }
}

步骤2: 导入并使用组件

接着，在你的父组件中导入并使用MyComponent。假设父组件在文件app.rs中。

rust
// src/app.rs

use yew::prelude::*;
use crate::components::my_component::MyComponent; // 确保路径正确

pub struct App;

impl Component for App {
    type Message = ();
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        html! {
            <div>
                <h1>{"欢迎来到主应用"}</h1>
                <MyComponent /> // 在这里使用MyComponent
            </div>
        }
    }
}

说明

1. 组件定义：每个组件需要实现Component trait，包括定义create和view函数。
2. 使用组件：在view函数中，你可以像使用HTML标签一样使用Rust组件。
3. 模块结构：注意Rust的模块系统（文件路径和mod.rs或lib.rs中的声明）对于正确导入组件至关重要。

通过以上步骤，你可以在Yew应用程序中灵活地导入和使用多个组件，使得你的项目结构更加模块化和可维护。