[Vue3] - defineProps 接收从App.vue传来的东西

在Person.vue中用defineProps接收从App.vue传来的东西

基本类型

App.vue

<template>
  <Person a="Hi" b="H"/>
</template>
  
<script lang="ts" setup name="App">
  import Person from './components/Person.vue'
</script>

Person.vue

<template>
    <div class="person">
      <!-- 可以直接打印接收到的a -->
      {{ a }} 
    </div>
</template>


<script lang="ts" setup name = "Person">
  import {defineProps} from 'vue'

  // 接收a
  let x = defineProps(['a', 'b']) // 必须以数组形式接收，不管传入的是1个还是多个
  console.log(x)
</script>


<style scoped>
  /* 可以添加样式 */
</style>

对象类型

App.vue

<template>
  <!-- 加‘:’了就是表达式，是表达式就会执行，这里会读取personList -->
  <Person :list="personList"/> 
  <!-- 但是ref不用加冒号，是特例 -->
</template>
  
<script lang="ts" setup name="App">
  import Person from './components/Person.vue'
  import {reactive} from 'vue'
  import {type Persons} from '@/types'

  let personList = reactive<Persons>([
    {id:'No1', name:'Jack', age:11},
    {id:'No2', name:'Rose', age:12, x:'xx'}, // 如果希望x部分对象有，部分没有，需要在接口增加一个‘?’
    {id:'No3', name:'Pete', age:13}
  ])

  console.log(personList)

</script>

<style scoped>
/* 可以添加一些样式 */
</style>

Person.vue

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

<script lang="ts" setup name = "Person">
  // import {defineProps} from 'vue' //defineXXX 可以不用引入，因为是宏函数
  import { type Persons } from '@/types';

  // 接收list
  
  
  withDefaults( // withDefaults()指定默认值 
    defineProps<{list?:Persons}>(), // 限制person对象的具体属性 问号使得App.vue传不传list过来都不报错
    {list:()=>[{id:'1', name:'Logan', age: 299}]} 
  )

</script>


<style scoped>
  /* 可以添加样式 */
</style>