Component間のデータ授受(子⇒親)①

Blazor

■子での変更を親に伝えたい場合、Event経由で行う必要がある。

 

■親(呼び出し側)
<PJ名.Components.コンポーネント名 Weight ="@Weight"
　　Height ="@Height" @bind-Result="Result" />

//親から子への引き渡しはbindは不要

@code{
    public double Weight { get; set; } = 60;
    public double Height { get; set; } = 170;
    public double Result { get; set; } = 0;
}

 

①@bind-Result="Result"で、子で変更したResultの値が親に渡される。

 

■子

<div>
　Height: @Height cm, Weight:@Weight kg.  
</div>
<button class="bnt btn-primary" @onclick="clickCalc">計算</button>
@code{
    [Parameter]
    public double Height { get; set; } = 170.0;
   [Parameter]
    public double Weight { get; set; } = 60.0;
    [Parameter]
    public double Result{get;set; }」

　//パラメータの変更を受け取るイベント
　[Parameter]
    public EventCallback<double> ResultChanged { get; set; }

    //計算
    public async void clickCalc()
    {
        Result = Weight/*1;
        await ResultChanged.InvokeAsync(Result);
    }

 

 

①[Parameter]属性付きで、授受したいプロパティを定義

②値変更時に子から親に渡したいプロパティについて、プロパティ名+Changed

　という名前で[Parameter]属性付きでEventCallBackを定義しておく。

③子で変更したプロパティを親に伝える場合、変更したプロパティ

　Changedイベントを、InvokeAsyncで起こす。

　その際、引数に渡す値をセットする。

　上の例でいうと、await ResultChanged.InvokeAsync(Result);

　(*)例えばWeightなどはChangedイベントを呼んでいないので、

　　子でWeightの値を変えても親には伝わらない。

 

■親

①親は、コンポーネント呼び出し時、やり取りするパラメータ名を

　@bind-XXX=値という形で子に渡す。

　子で、[Parameter]属性付きで定義されたプロパティ名がXXXにセットされる。

　(この時、インテリセンスが効く)

 

 

 

*1:Height/100)* (Height / 100