Yew数据链接

此crate允许通过发送消息从其他组件更改yew函数组件的数据。

有关更多信息，请参阅docs.rs文档。

lib.rs:

Yew数据链接

此crate允许通过发送消息从其他组件更改yew函数组件的数据。

用法

要从组件A更改组件B的状态

• 为您的数据类型实现MsgData。
• 在组件A中通过use_link创建链接。
• 在组件B中通过use_data创建数据。
• 通过use_bind_link将链接从A传递到B并绑定。
• 使用UseLinkHandle::msg和UseDataHandle::msg修改数据。
• 使用UseDataHandle::current读取数据。

示例

use yew::prelude::*;
use yew_autoprops::autoprops;
use yew_data_link::{use_bind_link, use_data, use_link, MsgData, UseLinkHandle};

struct Num(i64);

enum NumMsg {
    Inc,
    Dec,
}

impl MsgData for Num {
    type Msg = NumMsg;

    fn msg(&mut self, msg: NumMsg) {
        match msg {
            NumMsg::Inc => self.0 += 1,
            NumMsg::Dec => self.0 -= 1,
        };
    }
}

#[autoprops]
#[function_component]
fn Counter(#[prop_or_default] link: &UseLinkHandle<Num>) -> Html {
    let num = use_data(|| Num(0));
    use_bind_link(link.clone(), num.clone());

    html! {
        <div>{num.current().0}</div>
    }
}

#[function_component]
fn App() -> Html {
    let link = use_link();

    html! {
        <div>
            <button onclick={
                let link = link.clone();
                move |_| link.msg(NumMsg::Inc)
            }>{"+"}</button>

            <Counter link={link.clone()} />

            <button onclick={
                let link = link.clone();
                move |_| link.msg(NumMsg::Dec)
            }>{"-"}</button>
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

查看示例文件夹以获取更多信息。