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:()=> {默认值}