Vue3【十七】props的作用和组件之间的传值限定类型和默认值

Vue3【十七】props的作用和组件之间的传值限定类型和默认值

Vue3【十七】props的作用和组件之间的传值限定类型和默认值
父组件传值给子组件 多个值传递
传值限定类型和
默认值

实例截图

目录结构

代码

person.vue

<template><div class="person"><p>Props的使用</p> <!-- <p>父组件传值给子组件</p> --><p>父组件传值给子组件：a:{{ a }} b: {{ b }}</p><h3>list: {{ list }}</h3><h4><ul><li v-for="w in list" :key="w.id" >{{ w.name }} -- {{ w.age }}</li></ul></h4><!-- <h3 a ="1+1" :b="1+1" :d='a' >  测试标签计算代码：a ="1+1" :b="1+1" :d=a  </h3> --></div>
</template><script lang="ts" setup namwe="Person">
import { type PersonInter,type Persons } from '@/types';
import { reactive } from 'vue';// 等同于 Array<PersonInter>
// let personList3 = reactive<Persons>([
//     {id: 1,name: '白娘子',age: 10008,},
//     {id: 2,name: '法海',age: 10900,},
//     {id: 3,name: '文曲星',age: 20,x: 111},
// ])// difine开头的函数 可以直接使用 接受 a,b,list同时将props保存到x 中
let x = defineProps(['a','b','list'])
console.log(x)// 只接收list
// defineProps(['list'])// 接受 list 并限制类型
// defineProps<{ list: Persons }>()// 接受list 限制类型 限制必要性 指定默认值
// withDefaults(
//     defineProps<{ list?: Persons}>(),
//     {
//         list:()=>[
//             {id:1,name:'小青',age:11000}
//         ]
//     }// ) 
</script><style scoped>
.person {background-color: #ff9e4f;box-shadow: 0 0 10px;border-radius: 30px;padding: 30px;
}button {margin: 0 10px;padding: 0 5px;box-shadow: 0 0 5px;;
}
</style>

index.ts

//  定义一个接口，用于限制person对象的具体属性
export interface PersonInter {id: number,name: string,age: number,x?: number, //? 表示可选属性
}// 一个自定义类型
// export type Persons = Array<PersonInter>
// 等同于
export type Persons = PersonInter[]

app.vue

<template><div class="app"><h1>你好世界! 我是App根组件</h1><Person a="经验值+200" b="魔法药水+100" :list="personList" /><!-- <Person  /> --></div>
</template><script lang="ts" setup name="App"">
import Person from './components/Person.vue'
import {reactive} from 'vue'
import {Persons} from './types'let personList = reactive<Persons>([{id: 1,name: '白娘子',age: 10008,},{id: 2,name: '法海',age: 10900,},{id: 3,name: '文曲星',age: 20,x: 111},
])
</script><style scoped>
.app {background-color: #4fffbb;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>