Blazor与Vue学习对比：基础1.3阶段，属性与父向子传递如何操作？

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

组件除了需要解决视图层展示、视图层与逻辑层数据绑定的问题，还需解决一个重大问题，那就是在组件树中实现数据传递。这包括从父到子、子到父、祖先到孙以及任意组合之间的数据传递。

组件除了要解决视图层展示、视图层与逻辑层的数据绑定，还需要解决一个重大问题，就是在组件树中实现数据传递，包括了父到子、子到父、祖到孙，以及任意组织之间。而我们上一章讲到的实现双向绑定的两个指令，Vue的v-model，Blazor的@bind，可以认为是父到子和子到父，两个方向同时实现的语法糖，后面章节我们再来实现它。

我们先从最简单的父子传值开始学习。在Vue和Blazor中，都是通过属性来实现父子组件的数据传递。我们以往都是在html标签上设置属性，属性值可以是字面量，也可以绑定逻辑数据。比如这样<a :href="href">连接</a>。我们现在把a标签换成一个自定义的组件，<Link :href="href">链接</Link>，Link组件会如何对待这个绑定的href值呢？

1. 父子传值的基本使用
2. 传递属性值的类型
3. 传递属性值的校验

1、父子传值的基本使用

Vue在子组件中，通过defineProps（宏命令，不需要import）来定义属性，Blazor在子组件中，通过[Parameter]特性，来标注属性。