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>
相关推荐
吃饭睡觉打豆豆嘛11 分钟前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
Spider_Man18 分钟前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
小高00719 分钟前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible1 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua1 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12041 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy1 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
Bling_Bling_12 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子3 小时前
JS实现丝滑文字滚动
前端·javascript·面试
写不出来就跑路3 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html