Vue3-组合式API下的父传子和子传父

组合式API下的父传子

基本思想:

1.父组件中给子组件绑定组件

2.子组件内部通过props选项接收

复制代码
const props=defineProps({属性名:类型})

由于script上写了setup,所以无法直接配置props选项,所以需要借助于"编译器宏"函数接收传递的数据

js中访问传递的数据:props.变量名

模板中:{{变量名}}

如果传递的是一个变量,那么父组件中引入的子组件传递的数据要写成:

复制代码
<SonCom :message="message"></SonCom>

defineProps原理:就是编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换

组合式API下的子传父

基本思想:

1.父组件中给子组件标签通过@绑定事件

2.子组件内部通过emit方法触发事件

复制代码
const emit=defineEmits(['事件名'])
emit('事件名',参数)
相关推荐
lichenyang45312 分钟前
Socket.IO 原理与技术选型
前端
qq210846295313 分钟前
在python中什么是 self 和 cls?
开发语言·前端·python
我会冲击波14 分钟前
vibe coding 一个多月,我把 Claude Code + Pi 做成了桌面 IDE,还给它移植了 VS Code 的编辑体验
前端·javascript·后端
kyson_21 分钟前
前端性能优化全链路实践指南:从网络、缓存到渲染与监测
前端
前端fighter22 分钟前
线上崩溃?使用 TRAE Work 5分钟把混淆日志翻译成人话并输出复盘报告
前端·vue.js·程序员
网安蟹佬霸29 分钟前
CTF Web方向解题全攻略:从信息收集到getshell(附实战payload与脚本)
android·前端·网络·安全·web安全·网络安全·网安
JimmtButler33 分钟前
从 Java 到 JS:我终于把闭包想明白了
javascript·后端
前端玩坑坑34 分钟前
CSS Container Queries 容器查询入门教程
前端
带多刺的玫瑰39 分钟前
Leecode#4刷题之寻找两个正序数组的中位数
java·前端·算法
qq_2676128940 分钟前
项目集、里程碑与迭代联动:Gitee项目管理如何支撑多团队规模化交付与进度风险治理
前端·gitee