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

2022-05-23 01:31:07 阅读：207 来源： 互联网

标签：input2 知识点杂锦 Vue name child 组件 ref

现代前端框架的核心，是数据驱动，绝大多数时候，我们不需要直接去操作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 = "李四";
    }
}

标签：input2,知识点,杂锦,Vue,name,child,组件,ref
来源： https://www.cnblogs.com/functionMC/p/16299785.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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