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('事件名',参数)
相关推荐
一座古城21 分钟前
Claude Code 架构源码解析:AI 应用开发的范式跃迁
前端·后端
K哥爬虫22 分钟前
【JS 逆向百例】Vaptcha V4 手势验证码逆向分析
前端·后端
用户9210802628623 分钟前
复盘 AI Coding 工作台的流式链路:从 Sender 输入到 SSE 分流,再到 BubbleList 和右侧预览
前端
了不起的小明27 分钟前
SwiftMesh:本地 3D 模型查看器,加密交付 + 转盘录屏一站式搞定,开源免费
前端
默_笙30 分钟前
👍 我的代码被 ESLint 抓包了:单引号、var、没分号——全被当场点名
前端·javascript
搞个锤子哟30 分钟前
vue项目引入icon的问题
前端
树上有只程序猿34 分钟前
当低代码遇上AI,一个开发者的真实感悟
前端
郭邯38 分钟前
从零手写一个 UA 解析工具:我用 AI 辅助开发,踩了这些坑
前端
oh,huoyuyan40 分钟前
JS 动态网页抓不到?试试火车采集器网页抓取工具
开发语言·javascript·ecmascript
Heo41 分钟前
怎么保证缓存和数据库一致性?
前端·后端·面试