Jaki jest zamysł za użyciem ref="" z ElementReference w komponencie?

W elementach html typu input można wykorzystać atrybut(?) ref= do połączenia go z obiektem ElementReference. Dzięki temu możemy taki element łatwo przekazać do funkcji JS lub np. wywołać na nim FocusAsync().

W komponentach mamy dostęp do ref oraz @ref. @ref jest referencją do obiektu tego komponentu np. gdybyśmy chcieli wywołać jakąś funkcję.

A moje pytanie dotyczy ref (bez @) w componencie (a nie elemencie html) - jaki może być cel użycia takiej referencji w połączeniu z ElementReference?

Czyli mamy własny komponent do którego przypisujemy referencję do ElementReference tj:

<MyComponent ref="ElemRef"/> <= bez @!

@code {
public ElementReference ElemRef { get; set; } //ElementReference a nie MyComponent
}

Ale czy jest jakiś powód by robić coś podobnego? Czy można to jakoś wykorzystać?
Do czego będzie prowadzić ta referencja?
MyComponent może mieć wiele elementów a może nie mieć żadnego.

Z góry dzięki za wyjaśnienie.

Żeby odwołać się z ref to w MyComponent musi być takie Property:

@code {

    [Parameter]
    public ElementReference? @ref { get; set; }
}

I wtedy w tym komponencie masz referencje którą można wykorzystywać.

Przy użyciu:

<MyComponent @ref=MyComponent/>

nie dostajesz takiej możliwości, bo to się dzieje podczas renderowania strony.

@Wilktar dzięki, ale chyba nie do końca zrozumiałeś pytanie.
W componentach masz możliwość skorzystania zarówno z @ref jak również z ref (bez znaku @) i mi chodzi o jakieś uzasadnienie kiedy korzystamy z tego ref bez małpki.
Na pewno z ref (bez @) korzystamy w elementach html np. w inputach, ale zastanawiam się czy można z ref (bez @) korzystać w zwykłych komponentach i jaki tego cel?
Ewentualnie czy jest jakiś sens powiązać komponent z ElementReference? Co nam to da?

Na ile rozumiem blazor to @ref i ref to dwie osobne rzeczy.

@ref rozumiem jako 'instrukcję' blazora która podczas renderowania strony przypisuję referencję do tego komponentu.

ref to właściwość komponentu

Dzięki @ref mamy referencję do komponentu, dzięki ref możemy przekazać 'coś' do komponentu.

Zobacz ten przykład, czy o to chodzi?

@page "/counter"

<p role="status">Current count: @currentCount</p>

<input type="text" class="form-control" @ref=ElemRef>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<MyComponent ref="ElemRef" @ref=MyComponent/> 

@code {
    public ElementReference ElemRef { get; set; } 

    public MyComponent? MyComponent { get; set; }

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

MyComponent:

@inject IJSRuntime JS

<h3>MyComponent</h3>

<button class="btn btn-primary" @onclick="IncrementCount">Disable @(@ref.Value.Id)</button>

@code {

    [Parameter]
    public ElementReference? @ref { get; set; }

    public async Task IncrementCount()
    {
        await JS.InvokeVoidAsync("disabled_test", @ref);
    }
}

window.disabled_test = (element) => {
    element.disabled = true
};