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> |
代码改变了我们,也改变了世界
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源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