vue3 prop组件传值

Prince20080503

已于 2024-08-20 21:05:43 修改

阅读量606

点赞数 21

文章标签： vue typescript elementui

于 2024-08-20 20:56:43 首次发布

本文链接：https://blog.csdn.net/Prince20080503/article/details/141368378

版权

1.withDefaults+defineProps

1.1 子组件接收一个参数 + 限制类型 + 限制必要性 + 指定默认值

index.ts （TypeScript 文件）

export interface PersonInter {
    id:string,
    name:string,
    age:number
}

// export type Persons = Array<PersonInter>
export type Persons = PersonInter[]

App.vue（父组件）

<!-- html -->
<template>
    <div class="app">
        <Person :list="personList"></Person>
    </div>
</template>


<script lang="ts" name="APP" setup>
import Person from './components/Person.vue';
import { reactive } from 'vue';
import { Persons } from '@/types';
    
# 响应式数组
let personList = reactive<Persons>([
    {id:'test01',name:'zhangsan',age:18},
    {id:'test02',name:'lisi',age:30},
    {id:'test03',name:'wangwu',age:68}
])
</script>

Person.vue（子组件）

<template>
  <div class="person">
    <ul v-for="item in list" :key="item.id">
      <li>{{ item.name }} -- {{ item.age }}</li>
    </ul>
  </div>
</template>

// setup 语法糖
<script lang="ts" name="Person" setup>
import { defineProps } from 'vue';
import {type Persons,PersonInter } from '../types';

// 只接收list
// defineProps<{list:Persons}>()
    
// 接收list + 限制类型
// defineProps<{list:Persons}>()    

//  接收list + 限制类型 + 限制必要性 + 指定默认值
 withDefaults(defineProps<{list?:Persons}>(),{
   list:()=>[{id:'123',name:'lalala',age:10}]
 })
</script>

1.2 子组件接收多个参数 + 限制类型 + 限制必要性 + 指定默认值

App.vue（父组件）

<!-- html -->
<template>
    <div class="app">
        <Person a="哈哈" :b=b :list="personList"></Person>
    </div>
</template>


<script lang="ts" name="APP" setup>
import Person from './components/Person.vue';
import { reactive } from 'vue';
import { Persons } from '@/types';
# 定义动态响应数组
let personList = reactive<Persons>([
    {id:'test01',name:'zhangsan',age:18},
    {id:'test02',name:'lisi',age:30},
    {id:'test03',name:'wangwu',age:68}
])

# 定义数值类型的b
let b = 123
</script>

Person.vue（子组件）

<template>
  <div class="person">
    <h2>{{ a }}</h2>
    <h2>{{ b }}</h2>
    <ul v-for="item in list" :key="item.id">
      <li>{{ item.name }} -- {{ item.age }}</li>
    </ul>
  </div>
</template>

// setup 语法糖
<script lang="ts" name="Person" setup>
import { defineProps } from 'vue';
import {type Persons,PersonInter } from '../types';

// 接收多个参数
// let x = defineProps(['a','b','list'])
// console.log(x)


// 写法一：接收多个参数+限制类型+指定默认值
// defineProps({
//   a: {
//     type: String,
//     default: 'Default Value'
//   },
//   b: {
//     type: Number,
//     default: 0
//   },
//   list:Array<PersonInter>
// });


// 写法二（推荐）：接收a,b,list多个参数 + 限制类型 + 限制必要性 + 指定默认值
interface Props{
     a?:string,
     b?:number,
     list?:Persons
 }
//  defineProps<Props>()
 withDefaults(defineProps<Props>(),{
    a:'Default Value',
    b:0,
    list:()=>[{id:'123',name:'lalala',age:10}]
 })

</script>