Vue3---基础7（Props）

        props，用于给子组件传递父组件的值的方法

代码示例：

父组件

<template><Text1 :list="personList"/>
</template><script lang="ts" setup namae="App">import Text1 from './components/text2.vue'import { reactive } from 'vue'import { type Persons }  from '@/types'let personList = reactive<Persons>([{id: '19821220', name:'张杰', age: 22},{id: '19822024', name:'Jason', age: 25},])</script>

我在父组件内，定义了数据 personList 数组，并在子组件上绑定了该数据

        

子组件

<template><div class="person"><h2>{{ list }}</h2><ul><li v-for="item in list" :key="item.id">姓名: {{ item.name }}; 年龄：{{ item.age }}</li></ul></div>
</template><script lang="ts" setup name="text2">import {defineProps, withDefaults} from 'vue'import { type Person } from '@/type'// 只接收list// defineProps(['list'])// 接收list + 限制类型// defineProps<{list:Person}>()// 接收list + 限制类型 + 限制必要性 + 制定默认值withDefaults(defineProps<{list:Person}>(), {list:()=> [{id: 111222, name: '默认姓名', age: 18}]})// 接收list  同时将 props 保存起来// let x = defineProps(['a', 'list'])// console.log('x', x)</script>

有四种方法去使用

第一种

        只接收值

第二种

        接收值，同时保持该值

第三种

        接收值的时候使用<>，限制类型

第四种

        接收值的时候，限制类型，限制必要性和设置默认值

defineProps

        是用来在子组件内去接收父组件的值

withDefaults

        在接收父组件的值时，给该值设置默认值

        需要用回调函数去返回该默认值，不能直接设置

        xxx:()=> {默认值}