在Blazor服务器端将对父组件的引用传递给子组件

Question

(Blazor server.Net 6(

我有一系列带有网格组件的页面。然后，我在每个页面上都有一个按钮，可以自动调整列的大小以适应页面。与其在所有网格页面之间复制/维护相同的按钮代码，我更想将其分解为一个组件。

我知道如何将简单的数据传递给子组件，但我想知道是否可以将对父页面上网格的引用传递给该子组件，以便子组件中的按钮和代码可以对父网格中的列执行调整大小？

问题不在于调整列的大小，问题在于如何将对父页上组件的引用传递给子页。

***试图更清楚地澄清和重述问题。***

我有一个组件"；A"；在Blazor页面上。我还具有部件"；B"；在同一页上我想传递组件"；A"；至部件"；B"；从而在部件"上形成一个按钮；B"；可以调用组件"上的方法；A"；。这可能吗？

Answer 1

我不完全清楚你已经尝试了什么，以及你是如何实现调整大小的，所以这可能没有帮助，但这里有一些想法需要研究：

在这种情况下，您可以使用@ref属性。

在父组件内：

<ChildComponent @ref="elmRef" />
...
@code {
private ChildComponent elmRef;
...
}

现在，您可以使用子组件中存在的方法，例如：

elmRef.DoSomething();

因此，在您的特定示例中，每个页面都有一个包含所有共享按钮代码的组件，您可以使用对该组件的引用来使用按钮功能。您可以将有关网格的任何数据作为参数传递到组件中，例如

buttonRef.ResizeGrid(30, 40);

我不知道你的确切情况，因为你没有提供任何代码，但也许ref的概念对你有帮助。

您可以做的另一件事是围绕整个东西(网格和按钮(创建一个包装器组件，但将网格作为RenderFragment从每个页面传入。所以本质上你会有一个这样的组件：

@Grid

<YourButton />
...
@code {
[Parameter]
public RenderFragment Grid { get; set; }
}

然后每个父页面都将包含

<YourComponent>
<Grid>
//your grid code here
</Grid>
</YourComponent>

在这种情况下，"点击"实际上发生在主组件中，而不是共享按钮组件，每个页面只是作为RenderFragment补充网格。

最后，如果这些想法都不起作用，您可以使用EventCallback。EventCallback是将数据从子级传递给父级的方法。现在，在这种情况下，实际的调整大小代码不会发生在共享组件中——该组件只会限制重复的前端代码。所以，如果其他方法都不起作用，我会试试这个；我甚至可能会说，如果你用这种方式重构共享组件，那就不值得了。。但在这种情况下，当单击子组件中的按钮时，它可以触发将在父组件上处理的EventCallback。再一次，对我来说，这似乎是一种重构的浪费——你并没有真正得到什么。

如果没有帮助，请随时提供更多细节。

Answer 2

Parent.razor组件的html应该封装在中

<CascadingValue Value="@this" IsFixed="true">
</CascadingValue>

子组件应具有

[CascadingParameter]
protected Parent Context { get; set; }

现在，您可以从子组件中的父组件访问公共属性和方法，如以下

Context?.SomeMethod();

或

Context?.SomeProperty;