Vue Props传值

Props用于父组件向子组件传值

定义类型

javascript 复制代码
// 定义一个接口,用来限制Teacher的属性
export interface Teacher {
  name: string;
  age: number;
  gender: string;
}

export type teacherList = Teacher[];

// 一个自定义类型
export type Teachers = Array<Teacher>;

父组件

html 复制代码
<script lang="ts" setup name="App">
    import Person from './components/Person.vue'

    import { reactive, ref } from 'vue'
    import { type teacherList } from '@/types';

    let personList = reactive<teacherList>([
        { name: '张三', age: 20, gender: '男' },    
        { name: '李四', age: 25, gender: '男' },
        { name: '王五', age: 30, gender: '男' }
    ])
</script>

<template>
  <div class="container">
 	 <!-- <Person a="哈哈" :list="personList"/> -->
     // 不传list,让子组件显示默认数据
    <Person a="哈哈" />
  </div>
</template>

<style scoped>
  .container {
      display: flex;
      height: 100vh; /* 使容器占满整个屏幕高度 */
  }
</style>

子组件

html 复制代码
<script lang="ts" setup name="Person">
    import { type teacherList } from '@/types';

    // let x = defineProps(['a', 'list'])
    // 要先声明才能打印
    // console.log(x.a)

    // 只接受
    // defineProps(['a', 'list'])
    
    // 接受+限制
    // defineProps<{list:teacherList}>()

    // 接受+限制+限制必要性+默认值
    withDefaults(defineProps<{list?:teacherList}>(), 
      {
        // 默认值,这里的默认值也得是teacherList类型,而且是个函数
        list:() => [
          {name:'张三',age:20, gender:'男'},
          {name:'李四',age:25, gender:'女'}
        ]
      }
    )

    
</script>

<template>
  
  <div class="person">
    <!-- <h1>{{ a }}</h1> -->
    <ul>
      <li v-for="item in list" :key="item.name">{{ item.name }} - {{ item.age }}</li>
    </ul>
  </div>
 
</template>

<style scoped>
</style>
相关推荐
一枚前端小能手3 分钟前
🔥 前端储存这点事 - 5个存储方案让你的数据管理更优雅
前端·javascript
代码代码快快显灵16 分钟前
Axios的基本知识点以及vue的开发工程(基于大事件)详细解释
前端·javascript·vue.js
Mintopia18 分钟前
🚀 Next.js 后端能力扩展:错误处理与 HTTP 状态码规范
前端·javascript·next.js
IT酷盖19 分钟前
Android解决隐藏依赖冲突
android·前端·vue.js
小噔小咚什么东东1 小时前
Vue开发H5项目中基于栈的弹窗管理
前端·vue.js·vant
云枫晖1 小时前
JS核心知识-原型和原型链
前端·javascript
华仔啊2 小时前
Vue+CSS 做出的LED时钟太酷了!还能倒计时,代码全开源
前端·css·vue.js
@大迁世界2 小时前
JavaScript 2.0?当 Bun、Deno 与 Edge 运行时重写执行范式
开发语言·前端·javascript·ecmascript
red润2 小时前
Day.js 是一个轻量级的 JavaScript 日期处理库,以下是常用用法:
前端·javascript
JIngJaneIL3 小时前
记账本|基于SSM的家庭记账本小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·家庭记账本小程序