Blazor如何解析具有@page指令的嵌套组件

Question

我正在尝试理解Blazor中的组件可重用性。

在本教程中，Counter组件[它也有一个@page指令]被添加到Index组件中。

那么，@page指令被嵌套组件忽略了吗?

柜台

@page "/counter"
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;  

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

@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<Counter />

Answer 1

那么，@page指令被嵌套组件忽略了吗?

是的。在Blazor中，组件和页面之间没有真正的区别。你也可以从"添加|新建"菜单中看出。只有一个选择。

当你添加一个@page "..."时，组件变成可路由的，路由器会在MainLayout.razor.

的@Body元素中实例化它。

Answer 2

@page指令仅用于路由。它不影响组件的其他方面。如果有必要，您可以将20个页面平铺成一个页面，只需像添加其他组件一样添加它们。