【L?S】ASP.NET Core Blazor 初探【七】

无名

继续解释上一贴文件:

数据绑定

使用@bind指令可以跟某个对象实现的属性实现双向绑定。@bind指令本质上是通过对value跟onchange这个属性的绑定配合来实现双向绑定，这个套路怎么那么熟悉？对了VUE也是这么干的，笑哭。@bind="Student.Id"翻译过来等效于：

Student.Id =
        __e.Value.ToString())"
事件绑定
除了对数据的绑定，Blazor还支持对事件的绑定：

     
         保存
     
@onclick="TrySave" 表示这个button的click事件指向TrySave这个方法。

组件属性
我们封装组件经常对外暴露属性，以便接受外部传入的数据，比如我们这个Edit组件就需要外部传入一个Student对象才能正常工作。

    [Parameter]
    public Student Student { get; set; }
我们在@code代码里的属性上打上[Parameter]标签。这里叫做Parameter，估计是为了跟C#里的属性（property）进行区分。这样的话，这个属性就可以接受父组件的传参，注意这个属性是单项数据流，组件内对Student修改并不会修改外部组件的数据源，这个也很VUE啊，笑哭。

组件事件
我们除了需要对外暴露属性，常常还需要对外暴露事件，用来通知外部组件。当外部组件接受到事件的时候可以进行相应的处理。比如这个Edit组件点击保存的时候并没有进行真正的保存操作，而是对外抛一个事件，当外部组件接受这个事件的时候进行真正的处理，比如是调用新增API还是更新API。

[Parameter]
    public EventCallback OnSaveCallback { get; set; }
我们在@code代码里的EventCallback事件上打上[Parameter]标签。这样外部组件就可以注册这个事件了。当我们在这个组件上点击保存的时候激发这个事件,并且把修改过的Student对象传递出去。

OnSaveCallback.InvokeAsync(Student);