Vue3-17 父子组件使用props传值

TypeScript 文档复习

string 、 number 、 boolean 、 null 、 undefined 、 bigint 、 symbol 、 object

备注：其中 object 包含： Array 、 Function 、 Date ...

注意点： JS 中的这三个构造函数： Number、 String 、 Boolean ，他们只⽤于包装对象，正常开发时，很少去使⽤他们。

以上所有
四个新类型： void 、 never 、 unknown 、 any 、 enum 、 tuple
⾃定义类型： type 、 interface
注意点： JS 中的这三个构造函数： Number、 String 、 Boolean ，他们只⽤于包装对象，正常开发时，很少去使⽤他们，在 TS 中也是同理。

如果使用ts，在里面写的是具体的对象名，只能具象导入

如果对象文件命名为index.ts，就可以写导入到文件目录，不用具体到具体的对象名

为什么可以这么做？

这是因为 JavaScript/TypeScript 的模块解析规则，特别是目录索引文件（index file）的机制：当导入一个目录时，Node.js/TypeScript 会自动查找该目录下的 index.js或 index.ts文件。

编译器解析：

复制代码

查找 @/types
发现 types是一个目录
查找目录下的 index.ts文件
从 index.ts中导入所需内容

好处：

index.ts相当于一个目录的门面（facade）或 API 入口：

复制代码

隐藏了内部的文件结构
提供了统一的导出接口
让导入语句更简洁
便于内部重构而不影响外部代码

推荐用reactive的泛型

父组件是数据的提供方，子组件需要接受数据，接收值使用同父组件属性的变量接收

父组件向子组件中传入数据，子组件接收需要用到defineProps，如下接收，接收什么参数，直接视图上用什么参数显示值，缺点是打印不了，而且这个属性不能是ref。

可以使用变量接收这个接收的props，是所有接收值的对象。

js 复制代码

defineProps(['a', 'b'])

可以不接收父组件传过来的属性值；

如果接收了没有传过来的属性值，打印效果如下：值是undefined的。

如果获取接收的值，可以如下console.log(x.a); // 哈哈

标签的属性中，不加冒号是字符串，加冒号是js表达式，需要执行。

ref这个属性是特殊的，不需要加冒号就是变量

遍历用v-for，最好加上key，免得混乱，

问题：不加key就是用索引当key了，数据更新的时候容易错乱

子组件接收父组件数据

接收数据并限制类型，这样能防止父组件传递错误的数据

限制参数可传可不传

设置默认值

defineProps 是不用导入的；

defineXX 在Vue3中是宏函数，不用导入直接使用