问题描述
我在asp.net core 3.1上一个全新的blazor服务器应用程序中以.razor文件的形式创建了以下组件:
如果您通过IIS Express或.exe独立应用程序访问页面/P
,则由于访问冲突而崩溃:
在调试过程中,在子组件上设置EventCallBack
后看起来好像崩溃了。
parent.razor:
@page "/P"
<h3>Parent</h3>
Parent: @Name
<Child @bind-Name="Name" />
@code {
public string Name { get; set; } = "Bla";
}
Child.razor
<h3>Child</h3>
Value: @Name
@code {
private string _Name;
[Parameter]
public string Name
{
get => Name; set
{
if (value != _Name)
{
_Name = value;
//NameChanged.InvokeAsync(_Name).Wait();
}
}
}
[Parameter]
public EventCallback<string> NameChanged { get; set; }
}
编辑:在下一步中,我想更改子组件中的Name
字段,并使用回调函数将更改发送给父组件。
解决方法
我建议您采取一系列措施,以使您前进;
在子组件上,将EventCallback
定义为参数。添加一些机制来更改Name
,然后调用EventCallback
。在此示例中,我使用了一个文本框(通过两种方式绑定来使Name
属性保持最新状态)和一个用于调用回调的按钮。
<h3>Child</h3>
<input @bind-Value="Name" />
<button @onclick="OnButtonClicked" >Click me</button>
@code {
[Parameter]
public string Name {get; set;}
[Parameter]
public EventCallback<string> NameChanged {get; set;}
public async Task OnButtonClicked(){
await NameChanged.InvokeAsync(Name);
}
}
在父页面上,在页面初始化中设置默认字符串,然后将此字符串绑定到子组件。还为从子组件冒泡的名称更改定义事件处理程序。
@page "/mypage"
<h3>Parent</h3>
Parent: @Name
<Child Name="@Name" NameChanged="HandleNameChanged" }
@code {
public string Name { get; set; }
public override void OnInitialized(){
Name = "bla";
}
public void HandleNameChanged(string changedName){
Name = changedName;
}
}
,
我找到了答案……在喊话器上的getter上有一个错字<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<div id="app">
<b-dropdown text="Dropdown">
<component
:is="`b-dropdown-${option.element}`"
v-for="(option,index) in options"
:key="index"
>
{{ option.value }}
</component>
</b-dropdown>
</div>
,可以访问后备字段。
所以它进入了无限循环,这将导致崩溃...