当前位置: 首页 > news >正文

Vue3---基础7(Props)

        props,用于给子组件传递父组件的值的方法

代码示例:

父组件

<template><Text1 :list="personList"/>
</template><script lang="ts" setup namae="App">import Text1 from './components/text2.vue'import { reactive } from 'vue'import { type Persons }  from '@/types'let personList = reactive<Persons>([{id: '19821220', name:'张杰', age: 22},{id: '19822024', name:'Jason', age: 25},])</script>

我在父组件内,定义了数据 personList 数组,并在子组件上绑定了该数据

        

子组件

<template><div class="person"><h2>{{ list }}</h2><ul><li v-for="item in list" :key="item.id">姓名: {{ item.name }}; 年龄:{{ item.age }}</li></ul></div>
</template><script lang="ts" setup name="text2">import {defineProps, withDefaults} from 'vue'import { type Person } from '@/type'// 只接收list// defineProps(['list'])// 接收list + 限制类型// defineProps<{list:Person}>()// 接收list + 限制类型 + 限制必要性 + 制定默认值withDefaults(defineProps<{list:Person}>(), {list:()=> [{id: 111222, name: '默认姓名', age: 18}]})// 接收list  同时将 props 保存起来// let x = defineProps(['a', 'list'])// console.log('x', x)</script>

有四种方法去使用

第一种

        只接收值

第二种

        接收值,同时保持该值

第三种

        接收值的时候使用<>,限制类型

第四种

        接收值的时候,限制类型,限制必要性和设置默认值

defineProps

        是用来在子组件内去接收父组件的值

withDefaults

        在接收父组件的值时,给该值设置默认值

        需要用回调函数去返回该默认值,不能直接设置

        xxx:()=> {默认值}  

http://www.lryc.cn/news/338485.html

相关文章:

  • 第一节:什么是操作系统
  • Day:007(1) | Python爬虫:高效数据抓取的编程技术(scrapy框架使用)
  • Echarts使用dataTool写可自定义横坐标的盒须图(箱线图)
  • SpringBoot编写一个SpringTask定时任务的方法
  • 【Qt编译】ARM环境 Qt5.14.2-QtWebEngine库编译 (完整版)
  • vue简单使用二(循环)
  • JavaScript入门--变量
  • 给自己的机器人部件安装单目摄像头并实现gazebo仿真功能
  • 用AI的视角看世界
  • MATLAB 自定义实现点云法向量和曲率计算(详细解读)(64)
  • 拯救鲨鱼!Helping wireshark!wireshark未响应解决方法
  • 设计模式之责任链讲解
  • K8s: 将一个节点移出集群和相关注意事项
  • Python学习笔记24 - 学生信息管理系统
  • 【物联网应用案例】某制造企业电锅炉检测项目
  • 设计模式实践
  • 嵌入式学习52-ARM1
  • Java(MySQL基础)
  • 预约系统的使用
  • 酷开科技OTT大屏营销:开启新时代的营销革命
  • 网络安全(防火墙,IDS,IPS概述)
  • 安装IntelliJ IDEA插件教程
  • 大厂基础面试题(之四)
  • 为什么我们应该切换到Rust
  • 基于Linux定时任务实现的MySQL周期性备份
  • 【Altium Designer 20 笔记】隐藏PCB上的信号线(连接线)
  • 【Git教程】(九)版本标签 —— 创建、查看标签,标签的散列值,将标签添加到日志输出中,判断标签是否包含特定的提交 ~
  • MemberPress配置和使用会员登录页面
  • 分享一个预测模型web APP的功能模块和界面的设计
  • 智慧公厕是智慧城市建设中不可或缺的一部分