全栈开发之路——前端篇(5)组件间通讯和接口等知识补充

全栈开发一条龙——前端篇
第一篇:框架确定、ide设置与项目创建
第二篇:介绍项目文件意义、组件结构与导入以及setup的引入。
第三篇:setup语法,设置响应式数据。
第四篇:数据绑定、计算属性和watch监视

辅助文档:HTML标签大全(实时更新)

本文将进一步介绍组件间传参,并补充一些接口等的基础知识。

文章目录

  • 一、Props组件通信
    • 1.基本语法
    • 2.限制类型传参
      • 1.类型限制
      • 2.需求限制
      • 3.设置接受属性默认值
  • 补充1:ts接口
      • 数组接口
      • reactive接口
  • 补充2:标签的ref属性
  • 补充3:监视对象中的单个属性
      • 1.属性为基本类型
      • 2.属性为对象
      • 3.监视多个属性
      • 4.watchEffect

一、Props组件通信

1.基本语法


通过props,可以实现组件间通信,以上代码就能打印出 :哈哈。
同时,defineProps函数有返回值,返回值是一个对象,包含了你传递来的所有参数。我们可以用 let x = defineProps(['a','b']) 来接收并保存,就可以用x.a来调用。
传数组需要加:,加了:代表 表达式读取。

2.限制类型传参

1.类型限制

你先写一个接口(如果不会你先理解这里,下面会说接口怎么写),比如这个接口叫persons,这样你就可以这样接受参数

defineProps<{list:persons}>()

这样只能接受响应的类型,不然有warning

2.需求限制

有一种情况:某个参数有对象有,有的没有,我们的接受要能处理这种情况。

defineProps<{list?:persons}>()

加个问号即可。

3.设置接受属性默认值

对于2中的可有可无数据,在没有的时候,我们的页面什么都不显示就很尴尬,所以我们可以给他附一个默认值。这需要引入 withDefaults

import {withDefaults} from 'vue'
withDefaults(  defineProps<{list?:persons}>() , {
list : ()=> [{id:'2',name:'TTTi9er',age:18}]
}   )

注意,默认值的传入需要用函数。

补充1:ts接口

在src中新建文件夹types,包含index.ts文件

export interface PersonInter{id:string,name:string,age:number
}

在ts文件中加入接口,这样你在外面就可以这样调用接口了。

 import {type PersonInter} from '@/types'let person:PersonInter = {id:'234',name : 'zac', age:60}

这样可以保证代码的规范。
如果你在这里遇到了报错,Cannot find module '@/types' or its ...
可以把tscondig.json换为

{"compilerOptions": {// ..."baseUrl": "./",  // 这里需要配置"paths": {"@/*": ["./src/*"]  // 这里需要配置}// 如果baseUrl设置为'src',那paths就应该配置为{"@/*": "./*"},如下:// "baseUrl": "src",// "paths": {//  "@/*": ["./*"]// }// 相关baseUrl,paths说明请查看官方文档},// include也需要配置以下:"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"exclude": ["node_modules"]
}

然后重新打开项目即可。

数组接口

如果你要把接口应用于数组,请按照以下范式

你也可以直接定义数组的接口

reactive接口

注:如果元素是可有可无的,在定义接口的时候可以加一个问号

补充2:标签的ref属性

我们可以在框架中加入ref属性确保我们可以在其他地方选中它。ref是每一个Vue文件独立的,这样即使id与其他vue重复也没关系,使用方法如下:

<template><div class = "style_test">       <h2 ref="title">TTTi9er</h2><button @click="choose">点我选中title</button><h2>{{ j }}</h2></div>
</template><script>export default {name : 'Test'//组件名}
</script><script setup>import {ref} from 'vue'let title = ref()let j = ref('未选中')function choose(){j.value = title.value.innerText}</script><style>.style_test{background-color: rgb(72, 138, 166);box-shadow: 0 0 10px;border-radius:10px;padding: 20px;}
</style>

我们现在结构中加加入ref:<h2 ref="title">TTTi9er</h2>,然后再脚本中加入let title = ref()。这样我们就可以通过title来调用h2啦。效果如图:


如果ref标注的是组件,那将拿到一个组件对象实例

     <Test ref = "test"/>

注意,拿对象的时候,如果对象有属性,需要在源文件中明确哪些属性是能被引入的时候看到的。


主动暴露之后即可。

补充3:监视对象中的单个属性

1.属性为基本类型

上篇说到watch监视对象的单个属性亲测无效,此处将介绍一下监视单个属性的方法。
我们需要将watch的第一个参数(监视对象)改成一个函数。

watch(  ()=>{return person.game1} , ()=>{counter1.value+=1}   )

比如这样就可以了,watch可以监视的对像有四种:
1.一个函数的返回值
2.ref
3.reactive
4.以上形成的数组
所以我们将我们要监视的内容包装为一个函数的返回值即可,完整代码如下:

<template><div class = "style_test">       <h2>age为:{{person.me.age}}</h2><h2>name为:{{person.me.name}}</h2><h2>game1:{{person.game1}}</h2> <h2>game2:{{ person.game2 }}</h2><h2>name1改变了:{{ counter1 }}</h2><h2>整个对象改变了:{{ counter2 }}</h2><button @click="add_name">更换第一个游戏</button><button @click="change_person">换人</button><button @click="change_age">更换年龄</button></div>
</template><script>export default {name : 'Test'//组件名}
</script><script setup>import {reactive,watch,ref} from 'vue'let person=reactive({game1 : '原',game2 : '铲',me : {name : 'TTTi9er',age : 18}})let counter1 = ref(0)let counter2 = ref(0)function add_name(){person.game1 += '神,启动!'}function change_person(){Object.assign(person.me,{name:'李四',age:100})}function change_age(){person.me.age += 1 }watch(  ()=>{return person.game1} , ()=>{counter1.value+=1}   )watch(  person , ()=>{counter2.value+=1}   )</script><style>.style_test{background-color: rgb(72, 138, 166);box-shadow: 0 0 10px;border-radius:10px;padding: 20px;}
</style>



当参数为person的时候,任意改变都能触发监听,而包装为函数返回值之后,只有改变返回的函数才触发监听。

2.属性为对象

   watch(  person.me , ()=>{counter2.value+=1}   )

这样写可以监视修改对象地址、修改属性,即只要这个对象属性发生改变的时候就能触发监视。
如果是对象属性的属性,同理使用1方法就行

 watch(  ()=>{return person.me.age} , ()=>{counter2.value+=1}   )

3.监视多个属性

需要将所监视的集合变成列表。

   watch(  [()=>{return person.me.age},()=> person.game1 ], ()=>{counter2.value+=1}   )

4.watchEffect

不用写监视函数,直接写逻辑判断,watcheffect可以自动监视用到的变量,非常方便(无条件监视所有)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/8370.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux中的软连接和硬链接

一、软和硬链接连接 在Linux系统中&#xff0c;软连接&#xff08;符号链接&#xff09;和硬链接是文件系统中两种不同类型的链接&#xff0c;它们用于创建对文件的引用。下面详细解释这两种链接的特点和区别&#xff1a;、 软连接&#xff08;符号链接&#xff09; 定义&…

项目中遇到的问题

web项目中请求线程到service层的时候远程调用服务之前是串行化执行每个任务都要get阻塞等待任务完成&#xff0c;举例当用户在购物车页面点击去结算就会请求后台toTrade请求获取订单确认的详情数据并渲染到订单详情页&#xff0c;现在在toTrade请求中使用异步任务编排Completab…

鸿蒙应用开发系列 EX篇:HarmonyOS应用开发者基础认证

文章目录 系列文章背景认证考试题库参考注意:题库会不定时的进行具备调整甚至整体轮换,此为2024.5月版本注意:题库中题目的选项每次都会随机顺序,请参考内容判断题单选题多选题系列文章 鸿蒙应用开发系列 篇一:鸿蒙系统概述 鸿蒙应用开发系列 篇二:鸿蒙系统开发工具与环…

Windows运维_Win10自带图片查看器不见了在哪里打开

Windows运维_Win10自带图片查看器不见了在哪里打开 Windows 10 系统自带的图片查看器可以帮助我们快速查看电脑的图片&#xff0c;十分方便。 但是有不少用户发现自己 Win10 系统自带的图片查看器功能不见了&#xff0c;导致图片只能在画图或者其他工具里打开&#xff0c;极其…

西红柿叶病害检测(yolov8模型,从图像、视频和摄像头三种路径识别检测,包含登陆页面、注册页面和检测页面)

1.基于最新的YOLOv8训练的西红柿病害检测模型&#xff0c;和基于PyQt5制作的可视西红柿病害系统&#xff0c;包含登陆页面、注册页面和检测页面&#xff0c;该系统可自动检Bacterial Spot, Early_Blight, Healthy, Late_blight, Leaf Mold, Target_Spot, black spot&#xff0c…

电商风口的最后一班快车?有些人甚至正在All in视频号!

我是王路飞。 当抖音、快手、淘宝上的商家还在内卷的时候&#xff0c;有些人却转移了阵地&#xff0c;搭上了电商风口的“最后一般列车”&#xff0c;甚至正在All in 视频号。 内容来源于【醒醒团队-电商王路飞】 随着“微视”想要三分天下野心的失败&#xff08;与抖音、快手…

SD-WAN:企业低成本与高性能组网的理想选择

在竞争日益激烈的市场中&#xff0c;企业要立足就需要一种既能控制成本又能保证卓越性能的网络解决方案。尽管传统组网方式稳定可靠&#xff0c;但其高昂的硬件投入和升级成本让许多企业望而却步&#xff0c;而SD-WAN为企业提供了一个理想的解决方案。 成本效益&#xff1a;精打…

[Kubernetes] KubeKey 部署 K8s v1.28.8

文章目录 1.K8s 部署方式2.操作系统基础配置3.安装部署 K8s4.验证 K8s 集群5.部署测试资源 1.K8s 部署方式 kubeadm: kubekey, sealos, kubespray二进制: kubeaszrancher 2.操作系统基础配置 主机名内网IP外网IPmaster192.168.66.2139.198.9.7node1192.168.66.3139.198.40.17…

创建一个线程对象需要花费多少内存空间

创建一个std::thread对象所需的内存空间大小并不是固定的&#xff0c;因为它取决于多种因素&#xff0c;包括C运行时库的实现、编译器优化、以及可能的平台和架构差异。 std::thread对象本身是一个轻量级的控制块&#xff0c;它主要用于管理线程的执行&#xff0c;包括保存线程…

<iomanip>库中setw(),setfill()等函数的使用

#include <iomanip> #include<iomanip>是C标准库中的一个头文件&#xff0c;提供了用于输入/输出格式控制的函数和类。它特别适用于调整输出的对齐、填充、精度等格式。 setw() stew&#xff0c;这是一个用于操纵输出格式的函数&#xff0c;用于美化C程序的输出…

FreeBSD进入单用户模式拯救崩溃的系统

在FreeBSD系统里总归会遇到手残把系统弄崩的情况&#xff0c;即默认的多用户模式进不去或系统压根就启动到一半办错&#xff0c;或者进入调试模式&#xff0c;这时候可以进单用户模式拯救系统&#xff0c;一般都能救回来。 FreeBSD系统启动后进入单用户模式&#xff0c;先执行 …

华为试题之删除最少字符

题目描述 删除字符串中出现次数最少的字符 如果多个字符出现次数一样则都删除 输入描述 输入只包含小写字母 输出描述 输出删除后剩余的字符 若删除后字符串长度为0&#xff0c;则输出empty 我的思路是将字符串中的字符对应的数量和key统计后放到对应的字典中&#xff0c; 对字…

独家专访辉羲智能章健勇:数据闭环定义芯片,帮车厂造中国版FSD

‍采访、编辑 |德新 撰文 |苗岭 辉羲智能&#xff0c;智能驾驶芯片行业最新的进入者。 这家公司成立于2022年&#xff0c;今年辉羲即将发布它的首款高阶智驾芯片。而另外两家智驾计算平台的头部公司地平线和黑芝麻已经在前不久分别向港交所提交了IPO申请。 国内的自动驾驶行…

【问题记录】Windows命令行中执行.exe文件路径有空格的解决方法

Windows命令行中执行.exe文件路径有空格的解决方法 一&#xff0c;问题现象&#xff1a;二&#xff0c;问题原因三&#xff0c;解决方法 一&#xff0c;问题现象&#xff1a; 在Windows命令行中执行路径中带空格的.exe文件&#xff1a; 会报错&#xff1a; 二&#xff0c;问…

数据库系统理论——关系数据库

文章目录 一、关系&#xff08;数据结构&#xff09;1、概述2、名词解释3、关系模式、关系数据库、关系数据库模式4、基本关系的性质 二、关系操作&#xff08;数据操作&#xff09;三、关系的完整性1、实体完整性2 、参照完整性3、用户自定义的完整性 四、关系代数五、习题 前…

vue中 this.$set 的作用

向响应式对象中添加一个属性&#xff0c;并确保这个新属性同样是响应式的&#xff0c;且触发视图更新 在 Vue.js 中&#xff0c;this.$set 是一个实例方法&#xff0c;用于向响应式对象中添加一个属性&#xff0c;并确保这个新属性同样是响应式的&#xff0c;且触发视图更新。…

日期函数之计算两个日期之间的天数差

开篇 本体来源为《编程珠玑》第3章课后习题4的第一问。 问题概要 给定两个日期&#xff0c;计算两者之间的天数。 思路分析 以2022年1月22号和2024年2月3号为例&#xff1a; 首先根据年月日确定2022年1月22号是2022年的第22天&#xff0c;距离2023年还差(365 - 22 341)天&…

Qwen大模型实践之初体验

Qwen大模型实践之初体验 测试机器, 使用InternStudio提供的开发机&#xff0c;配置如下&#xff1a; 部分资源详细信息&#xff1a; # CPUIntel(R) Xeon(R) Platinum 8369B CPU 2.90GHz# GPU(base) rootintern-studio-50014188:~# studio-smi Running studio-smi by vgpu-smiW…

有什么快速ai智能生成思维导图的软件?6个软件教你轻松制作思维导图

有什么快速ai智能生成思维导图的软件&#xff1f;6个软件教你轻松制作思维导图 思维导图是一种图形化的工具&#xff0c;用于组织和表示思维过程中的概念和想法之间的关系。在现代的工作和学习环境中&#xff0c;快速制作思维导图对于理清思路、规划项目、记录笔记等方面都非常…

如何设置cPanel的自动备份

近期我们购买了Hostease美国VPS云主机产品&#xff0c;由于需要设置服务器的自动备份&#xff0c;我们向Hostease技术团队进行了咨询&#xff0c;他们提到VPS云主机的cPanel面板包含自动备份功能&#xff0c;下面我们就介绍如何进行自动备份的设置。 首先你需要登录到WHM面板&…