Blazor和Vue对比学习(基础1.4):事件和子传父

BlazorVue组件事件,都使用事件订阅者模式。相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点。要突破这个难点,一是要熟悉事件订阅模式<其实不难>;二是多练几次、熟悉套路。接下面,我们开始学习以下几个知识点

  • 事件订阅模式
  • 使用事件订阅模式实现子传父
  • 子传父参数详解
  • 事件定义的校验
  • Vue中使用模板,定义和触发事件的方法
  • Blazor中委托可以传递参数吗

 

 

一、事件订阅模式(简单的知道整个结构是怎样就可以了)

1、事件的两个主体:事件拥有者和事件订阅者
2、拥有者做的事情:定义事件,触发事件
3、订阅者做的事情:订阅事件(将自己的方法绑定到事件上),事件回调(事件被触发时执行绑定的方法)
4、事件的本质:持有 (任何类的)方法体的内存地址  的某某某,它介于变量和方法之间。说变量,是因为它只是保存了法体的内存地址(自身没有方法体),说方法是因为它可以像方法一要被触发。【注:C#里,有人将委托说成变量,是不对的】

 

 

二、使用事件订阅模式实现子传父

1、Blazor和Vue是如何应用事件订阅模式,实现子传父的?

●首先,明确事件的两个主体:

①事件拥有者:子组件,<Child></Child>
②事件订阅者:父组件,<Parent></Parent>

●其次,通过四个步骤实现子传父:子组件定义事件>父组件订阅事件>子组件触发事件>父组件响应事件

步骤①:子组件定义事件

//Vue: const emits = defineEmits( [‘childEvent1’] )  //Blazor: [Parameter] public EventCallback<string> ChildEvent1 { get; set; }

 

步骤②:父组件订阅事件

//Vue //使用v-on:指令,简写为@。 <Child @childEvent1 = “parentReceived”></Child>   //Blazor: //事件和属性的用法保持统一 <Child ChildEvent1 = “@ParentReceived”></Child> 

 

步骤③:子组件触发事件

//Vue: //emits为defineEmits方法的返回值 function childEmit(){     emits('childEvent1','I am children') }  //Blazor: //必须异步触发事件 private async Task ChildEmit() {     await ChildEvent1.InvokeAsync("我是子组件"); }

 

步骤④:父组件响应事件

 

//Vue: function parentReceived(msg){     Console.log(‘收到子组件的信息为:’+msg); }  //Blazor: Private void ParentReceived(string msg){     Console.WriteLine(‘收到子组件的信息为:’+msg) }

 

 2、下面举个粟子串一下:

(1)子组件上有一个数值显示框(ChildCount)和一个按钮,父组件上有一个数值显示框(ParentCount)

(2)子组件按钮递增ChidCount,同时每逢可以整除3的数时,将这个数传递给父组件,并在父组件的ParentCount上显示

//Vue===================================== //下面的代码有个Bug,子组件第一次整除3时,触发事件传值,但之后每次递增,都会触发事件,暂时查不出哪里问题,请大佬们指定迷津  //子组件Child代码 <template>     <div class="Child">         <h1>红色框是子组件</h1>         <h3>ChildCount:{{childCount}}</h3>         <button @click="Add">点击增加</button>     </div> </template>  <script setup> import {ref} from 'vue' const emits = defineEmits(['childEvent1']) const childCount = ref(0) function Add(){     childCount.value++     if(childCount.value % 3 === 0){         emits('childEvent1',childCount)     }      } </script>  //父组件Parent代码 <template>   <div class="Parent">       <h1>灰色框是父组件</h1>       <h3>ParentCount:{{parentCount}}</h3>       <Child @childEvent1 = "parentReceived"></Child>          </div> </template>  <script setup> import { ref } from 'vue' import Child from './components/Child.vue' const parentCount = ref(0) function parentReceived(arg1){     parentCount.value = arg1 } </script>

//Blazor==================================== //子组件Child代码 <div class="Child">     <h1>红色框里是子组件</h1>     <h3>ChildCount:@ChildCount</h3>     <button @onclick="Add">传值给父组件</button> </div>  @code {     private int ChildCount = 0;      [Parameter]     public EventCallback<int> ChildEvent1 { get; set; }      private async Task Add()     {         ChildCount++;         if (ChildCount % 3 == 0)         {             await ChildEvent1.InvokeAsync(ChildCount);         }     } }  //父组件代码 <div class = "Parent">     <h1>灰色框里是父组件</h1>     <h1>ParentCount:@ParentCount</h1>     <Child ChildEvent1="@ParentReceived"></Child> </div>   @code {     private int ParentCount = 0;      private void ParentReceived(int msg)     {         ParentCount = msg;     } }

 

 

 

子传父参数详解

通过以下几个方式来对比两个框架后发现,目前BlazorEventCallback,限制还是很多,未来EventCallback应该像ActionFunc一样,具备多重载。“EventCallback<T> 旨在分配单个值,并且只能回调单个方法”,目前只能传递单个值。本章第6节,我们尝试结合委托,看看能不能解决Blazor传递多参数的问题

1、传递“事件触发DOM”的事件参数(如鼠标事件参数)

//Vue=================================== //子组件,重点在DOM触发事件时,传入DOM事件参数e <template>     <div class="Child">         <h1>红色框是子组件</h1>         <button @click="childEmit">点击增加</button>     </div> </template>  <script setup> import {ref} from 'vue' const emits = defineEmits(['childEvent1']) function childEmit(e){     emits('childEvent1',e) } </script>   //父组件,常规的接收参数操作 <template>   <div class="Parent">       <h1>灰色框是父组件</h1>       <Child @childEvent1 = "parentReceived"></Child>          </div> </template>  <script setup> import { ref } from 'vue' import Child from './components/Child.vue' function parentReceived(e){     console.log(e) }

//Blazor==================================== //子组件,EventCallback的泛型是一个鼠标事件类型 <div class="Child">     <h1>红色框里是子组件</h1>     <button @onclick="ChildEmit">传值给父组件</button> </div>   @code {     [Parameter]     public EventCallback<MouseEventArgs> ChildEvent1 { get; set; }      private async Task ChildEmit(MouseEventArgs e)     {         await ChildEvent1.InvokeAsync(e);     } }   //父组件 <div class = "Parent">     <h1>灰色框里是父组件</h1>     <Child ChildEvent1="@ParentReceived"></Child> </div>  @code {     private void ParentReceived(MouseEventArgs e)     {         Console.WriteLine(e);     } }

 

2、传递自定义参数(单个值参数、复杂参数、多个参数)

//Vue===================================== //触发事件时,可以传递任意数量、任意类型参数 <template>     <div class="Child">         <h1>红色框是子组件</h1>         <button @click="childEmit">点击</button>     </div> </template>  <script setup> import {ref} from 'vue' const emits = defineEmits(['childEvent1']) function childEmit(){     emits('childEvent1',1,'Hi',[1,2,3],{name:'MC',age:18}) } </script>  <template>   <div class="Parent">       <h1>灰色框是父组件</h1>       <Child @childEvent1 = "parentReceived"></Child>          </div> </template>   //父组件按顺序接受参数 <script setup> import { ref } from 'vue' import Child from './components/Child.vue' function parentReceived(msg1,msg2,msg3,msg4){     console.log(msg1)     console.log(msg2)     console.log(msg3[1])     console.log(msg4.name) }

 

//Blazor==================================== //子组件。EventCallback只能传递一个参数,但不限制类型,如果要传递多个参数,可以使用数组或元组Tuple  <div class="Child">     <h1>红色框里是子组件</h1>     <button @onclick="ChildEmit">传值给父组件</button> </div>  @code {     [Parameter]     public EventCallback<Tuple<int,string>> ChildEvent1 { get; set; }      private async Task ChildEmit()     {
var tuple = new Tuple<int, string, MouseEventArgs>(1, "MC", e);
await ChildEvent1.InvokeAsync(tuple); } } //父组件 <div class = "Parent"> <h1>灰色框里是父组件</h1> <Child ChildEvent1="@ParentReceived"></Child> </div> @code { private void ParentReceived(Tuple<int,string,MouseEventArgs> tuple) { Console.WriteLine(tuple.Item1);
Console.WriteLine(tuple.Item2);
}
}

 

 

3、同时传递DOM事件参数和自定义参数

//Vue===================================== //子组件,触发DOM里面,以回调方式传入DOM的事件参数  <template>     <div class="Child">         <h1>红色框是子组件</h1>         <button @click="(e)=>childEmit(e)">点击</button>     </div> </template>  <script setup> import {ref} from 'vue' const emits = defineEmits(['childEvent1']) function childEmit(e){     emits('childEvent1',1,'Hi',e) } </script>  //父组件按顺序接收参数,没有变化

//Blazor==================================== //子组件。因为EventCallback只能传递一个参数,所以可以考虑也DOM的事件参数,也包装到类里  <div class="Child">     <h1>红色框里是子组件</h1>     <button @onclick="ChildEmit">传值给父组件</button> </div>  @code {     [Parameter]     public EventCallback<Tuple<int,string,MouseEventArgs>> ChildEvent1 { get; set; }      private async Task ChildEmit(MouseEventArgs e)     {
var tuple = new Tuple<int, string, MouseEventArgs>(1, "MC", e);
await ChildEvent1.InvokeAsync(tuple); } } //父组件,略

 

  

、事件定义的校验:

1、事件定义时,可以对事件的参数和返回值做约束。本来事件的使用,就比较绕弯烧脑,所以在还没有熟练使用事件前,可以暂且绕过这一环。

2、在Vue中,defineEmits有两种写法,一是数组写法,如defineEmits[事件1, 事件1];二是对象写法,在对象写法中,可以定义校验。对象写法如果在JS环境下,会比较麻烦;在TS中,表达反而简明很多。同时,和props一样,JS只支持运行时校验,而TS支持编译校验。如果需要使用校验,建议直上TS

3、Blazor是强类型,天生自带类型约束,但仅可以约束参数,无法约束返回值。以下案例,仅列举Vue的事件校验

//Vue===================================== //JS中:比较麻烦 const emits = defineEmits({   event1:null//不做校验   event2: (arg1,arg2) => { //校验参数       if (arg1 && arg2) {         return true       } else {         console.warn('请确定传递参数')         return false       }     } })    //TS中:语义明确,表达简明 const emits = defineEmits<{    (e: 'event1'): void    (e: 'event1', arg1: string, arg2:string): void }>()

 

 

 

五、Vue中使用模板,定义和触发事件的方法

Vue中,可以在模板中使用$emit,一步完成定义事件和触发事件两个操作。但这种操作的语义不明确,而且将逻辑混在模板里,不推荐。

//子组件:  //触发事件的时候,传递两个参数 <button @click="$emit('doSomething','arg1','arg2')"></button>  //触发事件的时候,传递两个参数和鼠标事件参数 <button @click="(e)=>$emit('doSomething','arg1','arg2',e)">/button>     //父组件没有变化,传来几个参数,父组件的回调函数就定义多少个参数:  <Child @doSomething="receiveMsg"></Child>  <script setup>  //接收两个参数 function receiveMsg(msg1,msg2) {console.log(`收到子组件的信息,${msg1}-${msg2}`)}  //接收两个信息和鼠标事件参数 function receiveMsg(msg1,msg2,e) {console.log(`收到子组件的信息,${msg1}-${msg2}-${e}`)}

 

 

六、Blazor中,委托可以传递参数吗?

1、子组件中,只触委托

//子组件中只触发委托,父组件渲染失败  //子组件 <div class="Child">     <h1>红色框里是子组件</h1>     <button @onclick="ChildEmit">传值给父组件</button> </div>  @code {     [Parameter]     public Action<string,int>? ChildAction1{ get; set; }      private void ChildEmit()     {         ChildAction1?.Invoke("MC", 18);     } }   //父组件。代码里实际上接收到值了,但模板里没有显示。此时,新增一个按钮“<button @onclick = "@(()=>StateHasChanged())"></button>”,即可显示 <div class = "Parent">     <h1>灰色框里是父组件</h1>     <h1>@actionMsg1</h1> //但模板里无显示值     <h1>@actionMsg2</h1> //但模板里无显示值     <Child ChildAction1="@ParentReceived2"></Child> </div>  @code {     private string actionMsg1 = "";     private int actionMsg2 = 0;     //其实回调接收到参数了     private void ParentReceived2(string actionMsg1,int actionMsg2)     {         this.actionMsg1 = actionMsg1;         this.actionMsg2 = actionMsg2;     } }

 

2、子组件中,事件和委托一起触发

//子组件中,同时触发委托和事件,且先触发委托,后触发事件,成功传值  //子组件 <div class="Child">     <h1>红色框里是子组件</h1>     <button @onclick="ChildEmit">传值给父组件</button> </div>  @code {     [Parameter]     public EventCallback<string> ChildEvent1 { get; set; } //事件      [Parameter]     public Action<string,int>? ChildAction1{ get; set; } //委托      private async Task ChildEmit()     {         ChildAction1?.Invoke("MC", 18); //先触发委托         await ChildEvent1.InvokeAsync("成功了"); //后触发事件     } }   //父组件 <div class = "Parent">     <h1>灰色框里是父组件</h1>     <h1>@eventMsg1</h1>     <h1>@actionMsg1</h1>     <h1>@actionMsg2</h1>     <Child ChildEvent1="@ParentReceived1" ChildAction1="@ParentReceived2"></Child> </div>   @code {     private string eventMsg1 = "";     private string actionMsg1 = "";     private int actionMsg2 = 0;      private void ParentReceived1(string eventMsg1)     {         this.eventMsg1 = eventMsg1;     }      private void ParentReceived2(string actionMsg1,int actionMsg2)     {         this.actionMsg1 = actionMsg1;         this.actionMsg2 = actionMsg2;     } }

 

3、原因?

(1)委托和EventCallback<T>,在代码层,都可以实现组件间数据传递

(2)委托和EventCallback<T>,最主要区别,当EventCallback发生时,会调用父组件的StateHasChanged(生命周期函数),重新渲染父组件和子组件,而委托不会。所以使用委托的时候,代码层数据是传递过去了,但模板没有响应。

 

后记:这章有一定难度,且做了一些比较深入的尝试,建议多看几次。这章熟练了,就可以愉快的搞双向绑定了。

发表评论

相关文章