• Blazor和Vue对比学习(基础1.6):祖孙传值,联级和注入


    前面章节,我们实现了父子组件之间的数据传递。大多数时候,我们以组件形式来构建页面的区块,会涉及到组件嵌套的问题。这种情况,很大概率需要将祖先的数据,传递给后代组件去使用。我们当然可以使用父传子的方式,使用属性一级级往下传,但这样真得很麻烦。所以在VueBlazor都提供了祖孙传值的方案。有人会问,子传父是不是也可以一级级往上传?当然可以,但绝不要这么去做,应该子传父本身就已经够绕了。如果有这种需求,应该考虑将数据状态从组件中剥离出来,我们将在进阶章节,一起学习“状态管理”。

    Vue中使用provide/inject这两个API来实现祖孙传值(这个概念被翻译为依赖注入,是有些混淆的,其实就是祖先provide提供数据,子孙inject消费数据),Blazor则使用CascadingValue组件和[CascadingParameter] 特性来实现。Vue的实现方式,统一在逻辑层,更加简明统一,而且灵活。反观Blazor,穿插于视图层和逻辑层,比较混乱,也不灵活。下面我们通过以下两个部分来学习:

    • 传递单个值和多个值
    • 如何修改传递数据

     

     

    一、传递单个值和多个值

    Vue和Blazor,都可以传递任意值以及多个值

    复制代码
    //Vue====================================================================
    //祖先组件Grandparent。通过provide提供数据,可以是任何值、任何响应式数据、任何方法
    
     
    
    
     
    
    //子孙组件Child。任何需要数据的子孙组件,都可以inject注入数据,Parent组件一样也可以注入。
    
    
    
    复制代码
    复制代码
    //Blazor===================================================================================
    //祖组件grandparent。
    //在模板中使用组件传值。比较麻烦,传递多值时要不断的嵌套,组件放在最内层。
    //推荐以Name-Value键值对的形式来传递,传递的数据,可以是值,也可以是属性,可以是任何类型。
    //CascadingValue也可以缺省Name的方式传值,接收时,需要使用类型来匹配,自行查文档,不推荐
    
    class = "grandparent">

    灰色是祖组件

    "name" Value="@("functionMC")"> "age" Value="@age"> "likeFruits" Value="@likeFruits"> //Parent父组件中嵌套着孙组件
    @code { private int age = 18; private string[] likeFruits = new string[] { "apple", "bananer" }; } //子组件
    class="Child">

    红色是孙组件

    姓名:@Name
    年龄:@Age
    喜欢的水果:
      @foreach (var item in LikeFruits) {
    • @item
    • }
    @code { //CascadingParameter特性的Name参数,就是键 //可以设置默认值,当找不到键时,使用默认值 //强类型,提供和接收的数据类型要一致 [CascadingParameter(Name = "name")] private string Name { get; set; } = "MC"; [CascadingParameter(Name = "age")] private int? Age { get; set; } [CascadingParameter(Name = "likeFruits")] private string[]? LikeFruits { get; set; } }
    复制代码

     

     

     

    二、如何修改传递数据

    虽然Vue和Blazor都实现了祖传孙,也都表现为类似键值对的特征。但两者有一个非常大的区别:

    1、Vue中,如果传递的是响应式数据【值例外】,在子孙中修改的话,祖先的数据会同步更新。provide和inject的数据,是引用同一个数据。所以,如果需要修改传值的数据的话,建议祖先组件同时创建一个修改的方法,然后将数据和修改逻辑方法一起provide出去,如果孙组件需要修改数据,则通过调用inject过来的方法来完成。

    2、而在Blazor中,我们是这么接收数据的【[CascadingParameter(Name = "name")] private string Name { get; set; }】,可以看出,重新定义了一个属性来接收值。所以,在子孙中修改的话,祖先的数据不会同步更新,因为它们是不同的两个变量,这和通过属性进行父传子的表现类似。如果要修改数据,就只能在祖组件中修改了,子孙数据会同步更新

    3、Vue的数据修改会灵活一些,但这种灵活要特别注意控制,而Blazor的设计更加严谨合理。

    下面仅提供在Vue中修改数据的推荐方法:

    复制代码
    //Vue
    //祖先组件Grandparent。
    
    
    
    
    
    //子孙组件Child。
    
     
    
    复制代码

     

      【最后补充一个小技巧:如果provide/CascadingValue是在根组件提供数据,我们就可以传递全局数据了,而且这个数据的生命周期是单例范围的】

  • 相关阅读:
    【BurpSuite】插件开发学习之J2EEScan(下)-主动扫描(11-20)
    数理逻辑:1、预备知识
    虚拟机扩容
    基于小波域的隐马尔可夫树模型的图像去噪方法的matlab实现代码
    传参值为空时不传字段
    iOS应用程序数据保护:如何保护iOS应用程序中的图片、资源和敏感数据
    记一个“奇葩”需求的实现
    TMK1TTA OSN1800全新板卡10路任意速率业务支路处理板
    【MySQL】SQL语句
    JavaScript 模块化开发入门
  • 原文地址:https://www.cnblogs.com/functionMC/p/16259553.html