Blazor和Vue对比学习（知识点杂锦3.04）：ref，组件引用

现代前端框架的核心，是数据驱动，绝大多数时候，我们不需要直接去操作DOM，而是通过改变数据，由框架自动完成DOM的渲染。但框架还是给我们留了后门，使我们可以拿到组件的引用。Vue使用ref属性，Blazor则使用@ref指令。

1、我们先看一个Vue的简单例子，使用很简单：

//父组件


//子组件
//如果子组件使用了

2、Blazor中，我们也来实现以上案例的两个功能：①自动对焦；②修改子组件属性值。两个功能的表现，和Vue都有较大差异，我们直接通过案例来比较。

//父组件
@page "/"
@inject IJSRuntime JSRuntime
"input1"/>
"input2"/>
"child">
"ChangeName">修改名称
@code {
private ElementReference input1; //HTML原生标签，使用ElementReference类型
private ElementReference input2;
private Child child; //自定义组件，类型就是组件名
protected override async Task OnAfterRenderAsync(bool firstRender)
{
//和Vue一样，可以获取到子组件public的字段或属性，但child.name和子组件中的name不是同一个值
//可以认为是子组件name的一个拷贝
Console.WriteLine(child.name);
//自动对焦功能，需要操作DOM，只能借助JS
//JSRuntime调用JS函数setFocus，input2作为参数传入
//InvokeVoidAsync为异步调用
//JS的函数为：function setFocus(element) {element.focus();}
//在index.html主页中，引入JS文件
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("setFocus", input2);
}
}
//改变child.name，只是改变父组件字段child的属性name的值，子组件中的name值并不会改变【此处和Vue差异比较大】
private void ChangeName()
{
child.name = "李四";
}
}