vue3的props的使用

在vue中，props常用来父子组件的传值，但是Vue3与Vue2在写法上是有较大的出入

Vue2中

//父组件<template><div class="father"><child :person='person' /></div>
</template><script>import child from './child'export default {components:{child},data(){return {person:[{ name:'张三'，age:18}]}}}
</script>//子组件<template><div class="child"></div>
</template><script>export default {props:{person:{type:Array,default:()=>[]}},data(){return {}},methods:{showData(){console.log(this.person)}}}
</script>

Vue3中

//父组件<template><child :person='personList' />
</template><script setup>import child from './child.vue'import { reactive } from 'vue'import { type Persons } from '@/type'  //用上上篇文章说到的泛型限制let personList = reavtive<Persons>([{ id:'101',name:'张三',age:18 },{ id:'102',name:'李四',age:20 },])
</script>//子组件<template><div class="child"> </div>
</template><script setup>import { defineProps } from 'vue'  //vue3需要使用defineProps来接收参数//只接收参数defineProps(['person'])  //在此只能用于渲染html，而无法在后续的操作中对其数据//进行逻辑操作//如果父组件传递的参数不止一个的话，那么子组件 defineProps(['person','other','...'])//接收数据并储存起来let personList = defineProps(['person'])  //此时的personList是一个对象// { person:[{},{} ] }
</script>

在子组件中是可以对父组件传递的值进行限制，不能随便传也不能随便改

//子组件<template><div class="child"> </div>
</template><script setup>import { defineProps } from 'vue'  //vue3需要使用defineProps来接收参数import { type Presons } from 'vue'  //引入泛型限制//只接收persondefineProps(['person'])//接收person + 限制类型defineProps<{person:Presons}>()//接收person + 限制类型 + 限制必要性defineProps<{person:Presons}>()  //在父组件中person必须传递给子组件defineProps<{person?:Presons}>()  //可有可无//接收person + 限制类型 + 限制必要性 + 指定默认值//指定默认值的话需要引入 withDefaultsimport { withDefaults } from 'vue'withDefaults(defineProps<{person?:Presons}>(),{person:()=>[{ id:'101',name:'张三',age:18 }]})</script>

在Vue3中以define开头的工具函数一般是宏函数，在页面中基本上是不用引入的