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('事件名',参数)
相关推荐
Giant1006 分钟前
深度玩转 Cursor Rules:让 AI 生成的代码 100% 符合团队规范
前端·面试
代码煮茶9 分钟前
Vue3 组件通信实战 | 8 种组件通信方式全解析
前端·vue.js
kyriewen10 分钟前
自定义事件:让代码之间也能“悄悄对话”
前端·javascript·面试
子兮曰17 分钟前
别把它当成一次普通“源码泄露”:Claude Code 事件给 AI Agent 团队提了什么醒
前端·npm·claude
心之语歌27 分钟前
Vue2 data + Vue3 ref/reactive 核心知识点总结
开发语言·前端·javascript
诸葛亮的芭蕉扇29 分钟前
tooltip-position-solution
前端·vue.js·elementui
程序员小寒32 分钟前
JavaScript设计模式(六):职责链模式实现与应用
java·javascript·设计模式
LXXgalaxy1 小时前
`摸鱼决策轮盘`【vue3+ts前端实战小项目】
前端
这是个栗子1 小时前
关于 TypeScript 的介绍
前端·javascript·typescript
亿元程序员1 小时前
亿元Cocos小游戏实战合集指南和答疑
前端