前面章节，我们实现了父子组件之间的数据传递。大多数时候，我们以组件形式来构建页面的区块，会涉及到组件嵌套的问题，一层套一层。这种情况，很大概率需要将祖先的数据，传递给子孙后代去使用。我们当然可以使用父传子的方式，使用属性一级级往下传，但这样真得很麻烦。所以在Vue和Blazor都提供了祖孙传值的方案。

插个话题：有人会问，子传父是不是也可以一级级往上传？当然可以，但你绝不要这么去做。子传父就已经够绕了，不要为难自己。如果有这种需求，应该考虑数据状态从组件中剥离出来，我们将在进阶章节，一起学习“状态管理”。

Vue中使用provide/inject这两个API来实现祖孙传值（这个概念被翻译为依赖注入，为免混淆，建议叫注入为好），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数据的地方，即祖组件，然后将数据和修改逻辑一起provide出去，如果孙组件需要修改数据，则通过调用inject过来的方法来完成。

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

3、Vue的数据修改会灵活一些，但这种灵活要特别注意控制，而Blazor的设计更加严谨合理。如果Blazor也能像Vue一样，直接在逻辑层提供联级值，那这票我一定投Blazor

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

//Vue
//祖先组件Grandparent。





//子孙组件Child。

 

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