Vue3---基础7（Props）

爱健身的小刘同学2024-04-14 19:45

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

代码示例：

父组件

javascript 复制代码

<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 数组，并在子组件上绑定了该数据

子组件

javascript 复制代码

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