Blazor和Vue对比学习(基础1.5):双向绑定

这章我们来学习,现代前端框架中最精彩的一部分,双向绑定。除了掌握原生HTML标签的双向绑定使用,我们还要在一个自定义的组件上,手撸实现双向绑定。双向绑定,是前两章知识点的一个综合运用(父传子、子传父),但因为又多了一层抽象,有一点小难度,需要一点时间和练习来熟悉套路,但必须要越过去。此后,基础部分就是一马平川了。此章我们分为以下几个部分来一起学习:

  • 补充:HTML标签和组件
  • HTML标签的双向绑定
  • 自定义组件的双向绑定
  • 再次认识指令属性/修饰符

 

一、补充:HTML标签和组件

在学习双向绑定前,我们需要进一步理解组件的本质,可以从下面两个角度:

角度1、我们定义一个组件,相当于定义一个类。在模板中使用一个组件时,比如这样<MyComponent></MyComponent>,相当于new一个实例对象,并通过标签属性进行数据赋值,实列化了,组件就具有了视图、状态、生命周期等特征。

角度2、无论Vue,还是Blazor。组件的视图模板,均由HTML和其它组件构成。其中组件成分还可以继续拆,拆到底,都是HTML。HTML是组件的根零件,到它就不可以再拆了,你只能使用它,无法窥探它的内部结构。你可以认为,组件在视图这个层面上,就是HTML的再组合。同时,组件还包括了数据和逻辑,通过绑定技术实现视图与数据的交互,再通过虚拟DOM技术实现了差量更新,提升了交互的性能。

理解了HTML标签和组件,将有助于我们学习后面的知识点。

 

 

二、HTML标签的双向绑定

我们之前使用{{}}或者@时,都只是实现了逻辑层>视图层的单向绑定,即逻辑层的数据改变时,视图层自动更新,这是不够的。比如输入框input,当我们在视图层输入值时,逻辑层的数据也应该响应新输入的值,实现自动更新,实现视图层>逻辑层的自动更新。

比如input(type为text),我们将value属性与逻辑层绑定,实现逻辑层到视图层的单向绑定。而视图层到逻辑层,则需要借助DOM事件的event对象,前面我们说过,DOM事件的回调里,会自动导入e对象。我们在回调里,直接通过e对象获得新输入的value值,然后赋值给逻辑层数据。这个过程很简单,因为不需要涉及跨组件通讯。

//Vue=====================================

//通过属性绑定和事件回调,实现双向绑定,不需要在父子组件之间传值
<template>
  <h1>逻辑层数据:{{inputValue}}</h1>
  <input  :value = "inputValue" @input="(e)=>{inputValue = e.target.value}">
</template>

<script setup>
import { ref } from 'vue'
const inputValue = ref('输入框初始值')
</script>

//v-model可以认为是以上方式的语法糖
<input type="text" v-model="inputValue"/>

 

//Blazor===================================

//通过属性绑定和事件回调,实现双向绑定,不需要在父子组件之间传值。获取event对象,需要指定类型,获取value值也和Vue不太一样,同时注意类型转换
<h1>逻辑层数据:@inputValue</h1>
<input value = "@inputValue" @oninput = "(ChangeEventArgs e)=>{inputValue = Convert.ToString(e.Value);}" />

@code {
    private string inputValue = "输入框初始值";
}

//@bind可以认为是以上方式的语法糖
//bind指令有三个属性,culture、format和event,其中enent用来指定更新时机,默认为onchang失去焦点时发生,此例修改为oninput输入时发生
<input @bind = "inputValue" @bind:event = "oninput" />

 

 

 三、自定义组件的双向绑定

如前所述HTML标签和组件的区别。在HTML标签中,我们可以使用原生的属性、事件及事件对象event,实现双向绑定。而组件,是一个再组合的东西,并没有原生的属性、事件及事件对象,都需要我们自己来实现。参照HTML标签的双向绑定,我们来尝试一下,思路和HTML标签是一样的,只是我们需要掰开组件,到内层去操作,所以需要进行数据的父传子和子传父。

下面的案例,我们在子组件里定义一个HTML标签:input文本框,实现子组件和父组件的逻辑数据实现双向绑定。双向绑定可以定义多个

//Vue=====================================
//1、父组件
<template>
 <div class="Parent">
      <h1>灰色框是父组件</h1>
      <h1>父组件逻辑数据值:{{parentValue}}</h1>
      <Child :inputValue = "parentValue" 
             @update:inputValue = "(newValue)=>{parentValue = newValue}">
      </Child>
</div>
</template>

<script setup>
import Child from './components/Child.vue'
import { ref } from 'vue'
const parentValue = ref('父组件初始值')
</script>


//2、子组件
<template>
    <div class="Child">
        <h1>红色框是子组件</h1>
        <input :value = "inputValue" @input="childEmit"/>
    </div>
</template>

<script setup>
import {ref} from 'vue'
const props = defineProps(['inputValue'])
const emits = defineEmits(['update:inputValue'])
const childEmit = (e)=>{
    emits('update:inputValue',e.target.value)
}
</script>


//3、下面来分析一下这个过程:
//从案例中,我们可以看到,<Child>这个组件,实际上仅是起到搬运工的作用,①派出属性,将父组件的数据状态parentValue交给子组件内部的input消费;②拍出事件,将子组件内部的input新值,传递给父组件的数据状态parentValue消费。
//除去Child这个外壳,实际上还是逻辑层的数据状态,在和HTML标签做交互,只是因为逻辑层数据和视图层HTML标签在不同的位置,所以需要<Child>这个桥梁!


//4、自定义组件的双向绑定,可以使用v-model语法糖吗?
//可以的,但是要遵守属性和事件的命名约定,如下:
//属性名:任意名称。但如果使用【v-model="parentValue】的格式,就必须命名为modelValue
//事件名:update:属性名。但如果使用【v-model="parentValue"】的格式,就必须命名为update:modelValue
//上面的案例,我们可以使用v-model来简化一下,但只能简化父组件哦,子组件保持不变【注意如果使用v-model的最简形式,案例中子组件的属性和事件名称改一下】
<Child v-model = "parentValue"></Child>
<Child v-model:firstValue = "parentValue1" v-model:secondValue = "parentValue2"></Child>
//Blazor====================================

//1、父组件
<div class = "Parent">
    <h1>灰色框里是父组件</h1>
    <h1>父组件逻辑数据值:@parentValue</h1>
    <Child InputValue="@parentValue" InputValueChanged="@((newValue)=>{parentValue = newValue;})"></Child>
</div>

@code {
    private string parentValue = "输入框初始值";
}

//2、子组件
<div class="Child">
    <h1>红色框里是子组件</h1>
    <input value = "@InputValue" @oninput = "ChildEmit" />
</div>

@code {

    [Parameter]
    public EventCallback<string> InputValueChanged { get; set; }

    [Parameter]
    public string? InputValue{ get; set; }

    private async Task ChildEmit(ChangeEventArgs e)
    {
        await InputValueChanged.InvokeAsync(Convert.ToString(e.Value));
    }
}


//3、分析:双向绑定的实现逻辑,和Vue基本是一样的。通过属性参数,将父组件的逻辑层数据parentValue交给子组件的input,通过EventCallback事件,将子组件input的新值,交给父组件的parentValue。本质上,还是逻辑层数据和HTML原生标签的交互,自定义组件只是玩个了寂寞。


//4、可以使用@bind的语法糖吗?肯定是可以的
//一样要遵守属性和事件的命名约定,如下:
//属性名称:任意名称
//EventCallback事件名称:属性名称Changed
//上面案例子组件不做改动,父组件可以简写为:
<Child @bind-InputValue="parentValue"></Child>

 

 

 

四、再次认识指令属性/修饰符

虽然是再次认识,但仍旧不打算深入,对于Blazor的指令属性,或Vue的事件修饰符,我认为即使已经开始进行生产应用的开发,都仅需要掌握用法即可,不需要深入内部的实现甚或自己来实现一个。所以,下面仅是一个使用方法的汇总

1、Vue的修饰符,常用的主要有v-on类修饰符和v-model类修改符

——————————————————————————————————————————————————————————————-

(1)v-on类修饰符

①prevent:阻止默认行为。HTML标签a的默认行为“打开链接”,被阻止执行

<a href=”http://www.hiwork.xyz” @click.prevent=”show”>

 

②stop:阻止事件冒泡。如果没有stop,点击div2时,div1也会被执行。

<div id = “div1″@click = “show1”>
    <div id= “div2” @click.stop = “show2”></div>
</div>

 

③capture:事件从外层开始执行。事件正常从内层开始执行(即冒泡),show2>show1。在外层使用capture后,从外层开始执行,show1>show2

<div @click.capture = “show1”>
    <div @click = “show2”></div>
</div>

 

④once:事件只触发一次。无论点击按钮多少次,show1都只在第一次点击时执行。

<button @click = “show1”></button>

 

⑤self:只有事件target是自己时才触发事件。点击div2时,按冒泡顺序,show1在show2之后执行,但因为div1使用了self,所以点击div2时,show1不会执行。

<div id=”div1″ @click.self = “show1″ style=”height: 100px;width: 100px;background-color: aquamarine;”>
    <div id=”div2″ @click = “show2″ style=”height: 50px;width: 50px;background-color:blue;”></div>
</div>

 

⑥⑦passive/native:这两个极少用,但文档吧

 

(2)v-model类修饰符,如<input v-model.number = “count” />

①number:将输入值转为数值

②trim:去除输入值首尾空格

③lazy:输入框失去焦点时再更新

——————————————————————————————————————————————————————————————-

 

2、Blazor的指令/事件属性,即少又难用,不知道未来是否会改进。主要有DOM事件的属性,Bind指令属性。另外,指令属性的使用也比较奇葩,需要重复申请,见案例

 

(1)DOM事件属性

①preventDefault,阻止HTML标签的默认行为,同Vue的prevent

<a href = “http://www.hiwork.xyz” @onclick = “Show1” @onclick:preventDefault></a>

 

②stopPropagation,组止冒泡,同Vue的stop

<div id = “div1” @onclick = “show1”>
    <div id= “div2” @onclick = “show2” @onclick:stopPropagation></div>
</div>

 

(2)Bind指令属性

①event,指定双向绑定视图更新逻辑的时机,是失去焦点时更新onchange(默认),还是实时更新oninput

<input @bind =”parentValue” @bind:event=”oninput”/>

②format,指定双向绑定的日期格式

<input @bind=”StartDate” @bind:format=”yyyy-MM-dd” />

③culture,指定语言,没有用过,查文档吧

 

    原文作者:functionMC
    原文地址: https://www.cnblogs.com/functionMC/p/16255095.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞