父组件
<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>
子组件
<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>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。