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

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

前端章节，实现了父子组件间的数据传递。很多时候，我们以组件形式构建页面区块，这会导致组件嵌套问题，一层套一层。这种情况下，很大概率需要将祖先组件的数据，向下传递。

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

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

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