vue3 props 05

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script setup lang="ts">
import person from '@/components/person.vue'
import { ref, reactive, defineProps } from 'vue'
import { type Person } from '@/types/index'
let personList = reactive<Person>([
    { id: '1', name: 'zhansan', age: 18 }
])
console.log(personList)
</script>
 
<template>
  <div>
    <person a="组件" b="要打印接收的参数只能把defineProps也一起打印" :list="personList"/>
  </div>
</template>
 
<style scoped></style>

  子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script setup lang="ts">
import { ref, reactive, withDefaults } from 'vue'
import { type Person } from '@/types/index'
// 接收a
// defineProps(['a','b'])
// defineProps只接收
// let x = defineProps(['a', 'b','personList'])
// 接收list+限制类型
// defineProps<{list:Person}>()
// 接收list+限制类型+限制必要性+指定默认值
// defineProps<{ list?: Person }>()
// 终极写法
withDefaults(defineProps<{ list?: Person }>(), {
    list:()=> [{
        id: '1111',
        name: 'lisi',
        age: 18
    }]
})
// 要打印接收的参数
// console.log(x)
 
</script>
 
<template>
    <div>
        <!-- <p>{{ a }}</p>
        <p>{{ b }}</p> -->
        <p>{{ list }}</p>
        <ul>
            <li v-for="(item, index) in list" :key="index">
                名字:{{ item.name }}
            </li>
        </ul>
    </div>
</template>
 
<style scoped></style>

  

posted @   文采呱呱  阅读(9)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2023-03-13 java进阶 -内部类 -静态类 -匿名类别类(重点)34
2023-03-13 java进阶 代码块 33
2023-03-13 java进阶 JDK8-JDK9 32
点击右上角即可分享
微信分享提示