vue3_05_props的使用

25 - props的使用

对响应式数据怎么用ts限制

看下面我写了一个数组，里头有3个人，我使用上一次的Persons这个规范；

上面的写法，不是很优雅的；

reactive毕竟是官方给你的定义数据的一个玩意；

我们是可以传递泛型的；

应该用下面的优雅的写法：

看我写错了，那么就是要报错的；

ts中可选属性的限制

我的需求是，我想要在上面的list当中的第三个人，增加一个x的属性，但是前两个人就不需要了；

那么我的意思是什么呢？

我的意思是，x这个属性，是list当中的元素，可以添加的，也可以不添加的，就是可选的。

这种情况，在ts当中的写法，如下所示的：

那么就可以这样写了：

需求：父亲把数据给儿子

我可以做一下这个小实验的；

在父组件当中，我使用了person这个组件标签；

• 然后在标签上，设置了一个a这个属性，然后有一个值就是“哈哈”
• 这个是什么意思呢？
• 这个意思就是说，我给子组件的标签上传了一对玩意，属性是a，值是哈哈；

那么我的子组件就是需要接收的；

• 子组件接收，首先就是要引入defineProps，这个就是定义来自外部的数据的意思；
• 然后defineProps这个东西，肯定是一个函数了；
• 形参就是一个数组了；
• 数组当中就是要写上字符串的，字符串就是属性的key了；
• 大概是这个意思了
• 这个跟vue2差不多的呢

然后我的子组件当中就可以使用这个传过来的属性了，就是a了；

这种情况下，这个小小的实验就做完了，这个就是一种父组件给子组件通信的方式了，对不对？对不对？

问题：子组件无法打印传过来的属性

上面的写法当中，我没有办法在子组件当中打印这个a；

真是TMD；

问题：为啥传过来的属性不能够打印呢？

你个瓜娃子，你仔细看看上面的代码，你打印的时候，你打印的是a，你接收的时候，你接收的是一个’a’；

a是被看成变量的，肯定是找不到的呀！！！！

到底应该怎么办呢？

你看看下面的做法吧：就是defineProps是有返回值的，是有返回值的，就是返回的是一个对象，这个对象里头是你接收到的所有的、全部的东西；

需求

现在想要通过父组件传递list

插曲：讲讲vue2的v-bind

看上面的图片当中，我是在h2标签上面，设置了五个属性的，a，b，c，d，ref的；

这里头就是有点东西的；

第一个就是a，这个a属性key前面是没有冒号的，就是一个普通的属性，然后它的值就是字符串；

所以a的值，就是'1+1'。

第二个就是b，这个b属性前面是有冒号的，就是绑定了，就是表达式，表达式这个玩意是要执行的。

所以b的值，就是2；

第三个就是一样的道理，就是字符串；

第四个就是一样的道理，就是表达式，要执行就要找变量，找到了就是9；

所以，如果是普通的属性，那么你随便吧；如果是想要绑定数据的，就是要用表达式的，就是要加上冒号的；

但是这里头有一个玩意是例外的，就是ref的；打标记的时候的；这个ref是不用加上冒号的；

子组件只接收数据是会犯错误的

应该怎么办呢？子组件不能只接收，也要限制

还能不能在接收的时候限制其他的呢？

接收的时候可以：

• 还可以限制类型；
• 还可以限制必要性；
• 还可以指定默认值；

默认值怎么办？