Blazorでコンポーネントの継承をする

ロジックの継承

ロジックの継承は@inheritsディレクティブで行う
メンバ変数やら関数やらが継承される

//MyBaseComponent.razor
@code
{
    //継承元
    public string MyValue;
}

//MyInheritsComponent.razor
@inherits MyBaseComponent
@code
{
    public string Text;
    protected override void OnInitialized()
    {
        Text = MyValue;
    }
}
<p>@Text</p>

見た目の継承

@inheritsディレクティブでは見た目（HTMLとかで記述した部分）は継承されない
ただ、「このコンポーネントのこの部分だけ書き換えたページを作りたい！」みたいなことがある
そういう場合は元ページでLayoutComponentBaseを継承し、書き換えるべき箇所（というか書き加えるべき箇所）に@Bodyプロパティを呼び出しておく
新しいページでは@layoutディレクティブで元ページを指定しておき、好きにHTMLなりを記述する
多分これは継承とは言わなくて、「レイアウトコンポーネントの利用」みたいな感じになるのだと思う

//MyBaseLayoutComponent.cs
<p>hogehoge</p>
@Body
<p>fugafuga</p>

//MyInheritsLayoutComponent.cs
@layout MyBaseLayoutComponent
<p>this is Body of MyBaseLayoutComponent!!</p>

こうすると、結果時にはこんな感じの見た目になる

<p>hogehoge</p>
<p>this is Body of MyBaseLayoutComponent!!</p>
<p>fugafuga</p>

どっちも継承

ロジックと見た目を同時に継承することもできる
inheritsディレクティブとlayoutディレクティブをべっこに指定するだけ
考えてみりゃそうなんだが、こういうやり方もあるよというメモ

//MyBaseComponent.razor
@inherits LayoutComponentBase
@code
{
    //継承元
    public string MyValue;
}
<p>hogehoge</p>
@Body
<p>fugafuga</p>

//MyInheritsComponent.razor
@inherits MyBaseComponent
@layout MyBaseComponent
@code
{
    public string Text;
    protected override void OnInitialized()
    {
        Text = MyValue;
    }
}
<p>inherits !!!</p>