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，指定语言，没有用过，查文档吧