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('事件名',参数)
相关推荐
程序员大阳11 分钟前
副队长CSS教程(37)–transition 过渡
前端·css·transition·过渡
ZoeLandia14 分钟前
TypeScript 01:类型注解与类型推断
前端·javascript·typescript
踩蚂蚁19 分钟前
从“打开灯光”看 KWS 多关键词语音控制是怎么工作的
前端
ppiero30 分钟前
AI 助手聊着聊着就失忆?先分清"上下文"和"记忆"(五步装长期记忆)
前端
打呵欠的猫35 分钟前
用 AI 做性能分析:一行命令找出拖慢页面的 5 个组件,优化后首屏快了 40%
前端·性能优化·ai编程
用户50800705462837 分钟前
芯飞云用了两个月,说说我的真实感受
前端
Amos_Web37 分钟前
Rspack 源码解析(二十一):Cacheable 与 Storage 如何持久化编译结果
前端·rust·前端框架
青烟小生42 分钟前
前端性能优化实战:从指标监控到极致体验
前端
deli00744 分钟前
0.1 加 0.2 为什么不等于 0.3?IEEE 754 双精度逐位实测
前端
Momo__1 小时前
前端 Code Review 实战:识别 AI 写代码的 15 个常见坑
前端·vibecoding