脚本宝典收集整理的这篇文章主要介绍了Blazor和Vue对比学习（知识点杂锦3.04）：ref，组件引用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
现代前端框架的核心，是@R_304_1982@，绝大多数时候，我们不需要直接去操作DOM，而是通过改变数据，由框架自动完成DOM的渲染。但框架还是给我们留了后门，使我们可以拿到组件的引用。Vue使用ref属性，Blazor则使用@ref指令。
1、我们先看一个Vue的简单例子，使用很简单：
//父组件 <template> <input ref="input1"/> <input ref="input2"/> <Child ref="child"></Child> <button @click="changeName">修改名称</button> </template> <script SETUP> import {ref,onmounted} From 'vue' import Child from './components/Child.vue' const input1 = ref(null) const input2 = ref(null) const child = ref(null) //组件加载时，input2获得焦点 //直接通过ref属性child，获得子组件Child的属性值 onMounted(()=>{ input2.value.focus() console.LOG(child.value.name) }) //通过ref引用，直接改变子组件的值【此处划重点，此处child.value拿到的是子组件的引用，.name和子组件的name是同一个值】 function changeName(){ child.value.name='李四' } </script> //子组件 //如果子组件使用了<script setup>，子组件的属性默认是私有的，ref引用看不到 //有两种方法可以暴露出去： //方法一：如案例，使用defineExpose暴露指定属性 //方法二：增加一个选项式的script，不需要defineExpose，就可以把子组件设为公开。如下所示 // <script>export default{}</script> <template> <h1>这是Child</h1> <h2>{{name}}</h2> </template> <script setup> import {ref,definePRops,defineExpose} from 'vue' const name = ref('张三') defineExpose({name}) </script>
2、Blazor中，我们也来实现以上案例的两个功能：①自动对焦；②修改子组件属性值。两个功能的表现，和Vue都有较大差异，我们直接通过案例来比较。
//父组件 @page "/" @inject IJSRuntime JSRuntime <input @ref="input1"/> <input @ref="input2"/> <Child @ref="child"></Child> <button @onclick="ChangeName">修改名称</button> @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 = "李四"; } }
以上是脚本宝典为你收集整理的Blazor和Vue对比学习（知识点杂锦3.04）：ref，组件引用全部内容，希望文章能够帮你解决Blazor和Vue对比学习（知识点杂锦3.04）：ref，组件引用所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。