Blazor与Vue学习对比：如何实现祖孙组件传值、联动及依赖注入？

本文共计1778个文字，预计阅读时间需要8分钟。

页面节，实现父子组件间的数据传递。通常情况下，我们以组件形式构建页面区块，这可能导致组件嵌套问题，层层嵌套。这种情况下，很大概率需要将祖先组件的数据，逐层传递下去。

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

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

Vue中使用provide/inject这两个API来实现祖孙传值（这个概念被翻译为依赖注入，为免混淆，建议叫注入为好），Blazor则使用CascadingValue组件和[CascadingParameter] 特性来实现。Vue的实现方式，统一在逻辑层，更加简明统一，而且灵活。反观Blazor，穿插于视图层和逻辑层，比较混乱，也不灵活。下面我们通过以下两个部分来学习：

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

一、传递单个值和多个值

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

//Vue==================================================================== //祖先组件Grandparent。