这次讲props，熟悉vue2的都知道这是一个父子组件传值的方式，在vue3这里也是如此，只是使用方式不太一样。
props的使用
基本的接收父组件的值
先搞一个父组件App，再弄一个子组件Test。
然后我们在父组件里向子组件传值：
假如这是vue2，我们在子组件里接收这个值的方式就是用props，用法如下：
这样就可以直接获取到父组件传来的值并且直接使用：
但是讲到现在vue3了，也就该知道了，在vue3里使用这个props之前肯定要先引入一个函数了，只不过这次引入的不是同名函数props，而是defineProps，然后该函数接收一个数组，数字里面的每一项是通过字符串的形式接收父组件传过来的值，就像是vue2那样。
这样也是可以正常使用的：
但是这样使用有一个问题，在vue3里就是像上面那样的写法，就只是可以在模板中使用，但是要想对其在js或者ts里进行操作，是会报错的，比如我们打印一下：
可以看到代码报错了，这是因为在vue3这里这种写法只能是接收父组件传过来的值，但是没有进行保存（vue2进行了保存可以直接进行操作）。所以我们还要对其保存一下，保存的方式也很简单，就是用一个变量去接收它。
打印这个变量以后可以看到是一个Proxy对象，里面以属性的形式存放了父组件传过来的值，所以我们就可以通过propsObj.a的形式在js或者ts里进行操作。
子组件规定父组件传来的值
学过vue2的都知道，子组件在接收父组件传来的值的时候是可以进行规定的，比如必须给子组件传什么类型的值，什么值必须传给子组件，如果这个值没有传给子组件，子组件还可以自己设置一个默认值，这一点vue3也有，不过要用到ts的泛型问题。
defineProps函数是可以使用泛型的，我们在defineProps后面添加一个泛型<>，然后我们就不在defineProps函数传参接收父组件的值了，而是在泛型<>里面接收，因为接收的值可能会是多个，所以泛型<>里面是一个对象，每一个属性就是父组件传来的值，如果父组件没传，就会报错。
<script setup lang="ts">
import { defineProps } from "vue";
defineProps<{ a }>();
</script>
这里会有一个报错，很正常，因为ts里面如果没有给变量指定类型就会默认这个类型为any，而ts不建议使用any，所以就会报错，因为这是我们在测试，所以就随便给一个指定类型比如string，这样代码就不会报错了。
这个时候就会看到页面是有报错的，说a这个属性是必须要传的但是父组件没有传。
如果该属性不是必须要传的呢，那么就在这个属性后面加一个?就可以了，这都是ts的知识点。
这么一来页面上就不会有这个报错了，所以使用泛型可以规定父组件是否必须传什么值，而且也可以规定父组件传来的值是什么类型。
那么怎么给父组件传来的值设置默认值呢？这就要再引入一个函数withDefaults。
<script setup lang="ts">
import { defineProps, withDefaults } from "vue";
withDefaults(defineProps<{ a?: string }>(), {
a: "123",
});
</script>
这么一来，就可以给父组件传来的值设置默认值了。
这里说点题外话，就是这种带有define的函数，比如本文的defineProps，上个帖子讲标签中的ref属性中的defineExpose，都是不用引入就可以直接使用的，还有文本的withDefaults也是可以不用引入就直接使用的。
