Blazor和Vue对比学习(基础1.3):属性和父子传值
组件除了要解决视图层展示、视图层与逻辑层的数据绑定,还需要解决一个重大问题,就是在组件树中实现数据传递,包括了父到子、子到父、祖到孙,以及任意组织之间。而我们上一章讲到的实现双向绑定的两个指令,Vue的v-model,Blazor的@bind,可以认为是父到子和子到父,两个方向同时实现的语法糖,后面章节我们再来实现它。
我们先从最简单的父子传值开始学习。在Vue和Blazor中,都是通过属性来实现父子组件的数据传递。我们以往都是在html标签上设置属性,属性值可以是字面量,也可以绑定逻辑数据。比如这样<a :href="href">连接</a>。我们现在把a标签换成一个自定义的组件,<Link :href="href">链接</Link>,Link组件会如何对待这个绑定的href值呢?【例子中,大家不要忽略一个事实,无论是a标签也好,还是组件Link也罢,它们都是在另外一个组件中使用的,这个组件我们称为父组件,而a标签或Link组件,称为子组件】
- 父子传值的基本使用
- 传递属性值的类型
- 传递属性值的校验
1、父子传值的基本使用
Vue在子组件中,通过defineProps(宏命令,不需要import)来定义属性,Blazor在子组件中,通过[Parameter]特性,来标注属性。Vue不断的创造新的API,不看源码,你不会知道这个defineProps是怎么工作的,而Blazor无招胜有招,使用的时候,你就能大概明白是怎么一回事!
//Vue===================================== //1、子组件Post //定义两个属性用于接收数据
<script setup>
const props = defineProps(['title','content']) //在代码中,通过props.title来使用属性值
</script> //在模板中使用接收到的两个属性值
<template>
<h1>{{title}}</h1>
<h3>{{content}}</h3>
</template> //2、父组件传递数据
//引入子组件Post
<script setup>
import {ref} from 'vue'
import Post from './components/Post.vue'
const content = ref('美国又来搅局!')
</script> //使用子组件,title属性绑定字面量,content属性绑定逻辑变量
<template>
<Post title="俄乌局事有重大变化" :content="content"></Post>
</template> //3、父组件传递数据-循环渲染
<script setup>
import {ref} from 'vue'
import Post from './components/Post.vue'
const posts = ref([
{title:'标题1',content:'内容1'},
{title:'标题2',content:'内容2'},
])
</script> <template>
<Post v-for="post in posts" :title="post.title" :content="post.content"></Post>
</template>
//Blazor=================================== //1、子组件Post
//在模板中使用接收到的两个属性值
<h1>@Title</h1>
<h3>@Content</h3> //定义两个属性用于接收数据
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public string Content { get; set; }
} //2、父组件传递数据
//使用子组件,title属性绑定字面量,content属性绑定逻辑变量
<Post Title="俄乌局事有重大变化" Content="@content"></Post> @code {
private string content = "美国又来搅局";
} //3、父组件循环渲染传递数据
@foreach (var post in posts)
{
<Post Title="@post.Title" Content="@post.Content"></Post>
} @code {
private List<PostModel> posts = new List<PostModel>
{
new PostModel{Title="标题1",Content="内容1"},
new PostModel{Title="标题2",Content="内容2"}
};
}
2、传递属性值的类型
对于HTML标签的属性,我们只能传递指定的类型,一般是数值、字符串、布尔等简单类型,但对于自定义组件,我们可以传递任意类型,Vue和Blazor在这方面都没有限制。
【有个注意点需要特别小心】:
Vue:当传递数组、对象等引用类型时,仅仅传递了引用地址。所以,在子组件中直接修改传递过来的属性值,父组件的值也会被改变。在Vue中,如果需要修改传递过来的属性值,建议将属性值赋值给一个新变量,再对新变量进行加工处理。
Blazor:不存在Vue的问题,即使传递引用类型,也是传递一个新值给子组件,属性值在父子组件中相互独立。
//Vue===================================== //子组件,接收对象和数组
<script setup>
const props = defineProps(['value1','value2'])
</script> <template>
<h1>{{value1.name}}-{{value1.age}}</h1>
<h3 v-for="item in value2">{{item.name}}-{{item.age}}</h3>
</template> //父组件,传递对象和数组类型数据
<script setup>
import {ref} from 'vue'
import Post from './components/Post.vue'
const value1 = ref({name:'Fun',age:18})
const value2 = ref([
{name:'Fun',age:18},
{name:'MC',age:19},
])
</script> <template>
<Post :value1="value1" :value2="value2"></Post>
</template>
//Blazor //子组件,定义了一个PostModel类属性,以及这个类的集合属性
<h1>@($"{PostModel.Title}-{PostModel.Content}")</h1> @foreach (var item in PostModels)
{
<h3>@($"{item.Title}-{item.Content}")</h3>
} @code {
[Parameter]
public PostModel PostModel { get; set; }
[Parameter]
public List<PostModel> PostModels { get; set; }
} //父组件创建了一个PostModel实例,以及PostModel的集合实例
<Post PostModel="@postModel" PostModels="@postModels"></Post> @code {
private PostModel postModel = new PostModel { Title = "标题1", Content = "内容1" }; private List<PostModel> postModels = new List<PostModel>
{
new PostModel{Title="标题2",Content="内容2"},
new PostModel{Title="标题3",Content="内容3"}
};
}
3、传递属性值的校验
Blazor是天生强类型,属性值的校验非常简单。而Vue中的属性值校验也麻烦些,如果不使用TS,只能支持运行时校验,使用TS,结果volar,可以支持编译时校验。
//Vue===================================== //运行时校验
const props = defineProps({
// 基础类型检查
propA: Number,
// 多种可能的类型
propB: [String, Number],
// 必传,且为 String 类型
propC: {
type: String,
required: true
},
// Number 类型的默认值
propD: {
type: Number,
default: 100
},
// 对象类型的默认值
propE: {
type: Object,
default() {
return { message: 'hello' }
}
}
} //借助TS和volar实现编译时检验 //泛型约束
const props = defineProps<{
foo: string
bar?: number
}>() //使用接口
interface Props {
foo: string
bar?: number
}
const props = defineProps<Props>() //默认值的话,比较麻烦,使用withDefault再包一层
const props = withDefault(defineProps<{
foo: string
bar?: number
}>(),{
foo:'hello',
bar:10,
})
//Blazor==================================== //类型、是否必填、默认值,一行搞定,而且都是c#本身的语法,不用借助API,就问你爽不爽!? @code {
[Parameter]
public PostModel? PostModel { get; set; } = new PostModel { Title = "默认标题", Content = "默认内容" };
[Parameter]
public List<PostModel> PostModels { get; set; }
}
Blazor和Vue对比学习(基础1.3):属性和父子传值的更多相关文章
- Blazor和Vue对比学习(基础1.8):Blazor中实现计算属性和数据监听
1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...
- Blazor和Vue对比学习(基础1.4):事件和子传父
Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...
- Blazor和Vue对比学习(基础1.6):祖孙传值,联级和注入
前面章节,我们实现了父子组件之间的数据传递.大多数时候,我们以组件形式来构建页面的区块,会涉及到组件嵌套的问题,一层套一层.这种情况,很大概率需要将祖先的数据,传递给子孙后代去使用.我们当然可以使用父 ...
- Blazor和Vue对比学习(基础1.7):传递UI片断,slot和RenderFragment
组件开发模式,带来了复用.灵活.性能等优势,但也增加了组件之间数据传递的繁杂.不像传统的页面开发模式,一个ViewModel搞定整个页面数据. 组件之间的数据传递,是学习组件开发,必须要攻克的难关.这 ...
- Blazor和Vue对比学习:说在开始前
1.Vue:现代前端三大框架之一(Vue/React/Angualr),基于HTML.CSS和JavaScript,2014年正式对外发布,目前已发展到3.X版本.值得说道的是,Vue的创始人作者是华 ...
- Blazor和Vue对比学习(进阶2.2.4):状态管理之持久化保存(2),Cookie/Session/jwt
注:本节涉及到前后端,这个系列的对比学习,还是专注在前端Vue和Blazor技术,所以就不撸码了,下面主要学习概念. 我们知道,Http是无状态协议,客户端请求服务端,认证一次后,如果再次请求,又要重 ...
- Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
- Blazor和Vue对比学习(基础1.2):模板语法和Razor语法
Vue使用模板语法,Blazor使用祖传的Razor语法,从逻辑和方向上看,两者极为相似,比如: 都基于HTML 都通过声明式地将组件实例的状态(数据/方法)绑定到呈现的DOM上 都通过指令实现更加丰 ...
- Blazor和Vue对比学习(基础1.5):双向绑定
这章我们来学习,现代前端框架中最精彩的一部分,双向绑定.除了掌握原生HTML标签的双向绑定使用,我们还要在一个自定义的组件上,手撸实现双向绑定.双向绑定,是前两章知识点的一个综合运用(父传子.子传父) ...
随机推荐
- 学习FastDfs(三)
FASTDFS是什么 FastDFS是由国人余庆所开发,其项目地址:https://github.com/happyfish100 FastDFS是一个轻量级的开源分布式文件系统,主要解决了大容量的文 ...
- OpenCV - Add Noise的一些方法
噪声常用有两种:一种椒盐噪声,一种高斯噪声. import numpy as np def pepper_and_salt(src, proportion): """ : ...
- c/c++中的i++和++i的区别
使用 i++ vs. ++i i++是先赋值再加1 ++i是先加1再赋值 到目前为止,你已经学习了如何编写下面这样的 C++ for 循环: for (int i = 0; i < 10; i+ ...
- 浅析Node与Element
起因 起因有二: 在看winter老师的分享:<一个前端的自我修养>时,有注意到这么一幅图,里面有写childNode和children属性. 昨天有学弟问起我,能否自己定义一个所有元素节 ...
- 关于个人开源项目(vue app)的一些总结
关于个人开源项目(vue app)的一些总结 项目地址 https://github.com/BYChoo/record 项目简介 此项目名叫:Record.是以Vue全家桶(vue,vue-rout ...
- python-班级人员信息统计
输入a,b班的名单,并进行如下统计. 输入格式: 第1行::a班名单,一串字符串,每个字符代表一个学生,无空格,可能有重复字符.第2行::b班名单,一串字符串,每个学生名称以1个或多个空格分隔,可能有 ...
- Hadoop真分布式实现SSH免密登录
首先需要两台服务器(CentOS安装Linux见:https://www.cnblogs.com/syq816/p/12355115.html) 伪分布式的搭建见:https://www.cnblog ...
- vue中判断页面滚动开始和结束
参考链接:https://www.jianshu.com/p/adad39705ced 和 https://blog.csdn.net/weixin_44309374/article/deta ...
- python的数据库编程
数据库的基础知识 一.数据库的概念 数据库将大量数据按照一定的方式组织并存储起来,是相互关联的数据的集合.数据库中的数据不仅包括描述事物数据的本身,还包括相关数据之间的联系.数据库可以分为关系型数据库 ...
- python---运算符和编码
格式化输出 在输出数据时,会有用户需要输入的信息被输出,没办法预先知道,这就需要使用格式化输出.先在相应位置放置一个占位符,再把字符串里的占位符与外部的变量做个映射关系. name = input(& ...