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('事件名',参数)
相关推荐
雪芽蓝域zzs14 分钟前
第 7 节:多边形点击弹窗 + 清空绘制按钮
vue.js
溪语流沙25 分钟前
【Web全栈进阶】Composition API与组件通信:props深入、emit、插槽
前端·css·vue.js
ZoeLandia27 分钟前
TypeScript 03:泛型与工具类型
前端·typescript
code_Bo29 分钟前
从策划到上线:我和 AI 一起做了个微信记账小程序
前端·ai编程·cursor
Shirley~~44 分钟前
Three.js加载Gltf模型并播放动画
前端·3d
Data analyse4561 小时前
Session超时与浏览器休眠的计时校验
大数据·前端·数据库·数据分析
星始流年1 小时前
AI 时代,软件程序员未来 10—15 年的职业前景
前端·后端·ai编程
猪猪拆迁队1 小时前
跨电脑复制共享-局域网直连踩坑
前端·后端·go
静默回滚1 小时前
逐帧处理视频的内存去哪了,我从看错读数查到没排队
前端
重庆穿山甲1 小时前
我们不做「看起来很聪明」的知识库:一套企业级 RAG 平台的 37 屏真机实录
前端